MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Create a Tooltip with jQuery

Course Summary

Shows how to convert text or graphics into a mouse-sensitive tooltip with HTML and jQuery.       

  • +

    Course Syllabus

       Previewing the final project
       About the exercise files
    1. Creating Web Graphics
       Creating a folder and adding the starter files
       Saving web graphics from Photoshop
    2. Adding HTML Markup
       Creating the tooltip container
       Styling the tooltip
       Adding the tip info
    3. Styling and Activating the Tooltip
       Adding the jQuery document ready and mouse events
       Detecting and setting text-based tooltips
       Creating HTML containers
       Detecting and setting HTML-based tooltips
    4. Adding Positioning and Effects to the Tooltip
       Attaching the tip container to the mouse
       Positioning the tooltip to the right or left of the cursor
       Positioning the tooltip above or below the cursor
       Hiding the tooltip container until it's triggered by the mouse
       Setting the tooltip to fade in and out
    5. A Mouse Position "Gotcha"
       Accounting for other CSS-positioned elements
    Where to Go from Here
       Exploring resources for additional menu plug-ins


Course Fee:
USD 25

Course Type:


Course Status:



1 - 2 hours / week

This course is listed under Development & Implementations Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top