Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Saving web graphics from Photoshop
- Creating the tooltip container
- Adding the jQuery $(document).ready() and mouse events
- Detecting and setting HTML-based tooltips
- Attaching the tip container to the mouse
- Setting the tooltip to fade in and out
- Accounting for other CSS-positioned elements
Skill Level Intermediate
Now in this course we touched on a couple different technologies. The first one is HTML5. The layout that I provided as a starting point uses HTML5 and we also added in a Google shiv, which enables HTML5 for older browsers, such as IE 7 and 8. And if you take a look at the courses that I have on lynda.com, there is a Create an HTML5 Video Gallery; this particular course walks you step-by-step through adding in the Google shiv and showing you exactly how that HTML5 translates to older browsers. The other thing we did in this course was we took a look at different CSS3 properties.
We looked at the RGBA color space to do Alpha, we also look that rounded corners, and so I also recommend the CSS3 First Look on the lynda.com library to get a sense of what's new in CSS3. And then finally, we added in a fade effect into our tooltip. This as part of a rollover animation, and I have the examples of additional animated rollovers that you can create using jQuery in combination with HTML and CSS. So with that, that concludes Creating a Tooltip for your web site using jQuery, and I really appreciate you watching my course.