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 and Dreamweaver

Course Summary

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

  • +

    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