Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Tooltips can greatly improve the usability of your web site by providing direction and cues to visitors. In this course, Chris Converse shows how to convert text or graphics into a mouse-sensitive tooltip. The tutorials demonstrate how to create the markup in Dreamweaver and activate the tooltip with jQuery, as well as add positioning and effects.
Now we want to hide the tooltip container until the user actually rolls over an item with a tooltip class. So let's come over to our tooltip.css file. Let's scroll down. Let's find the tooltip container ID that we created earlier. After the border radius property let's hit a Return. Let's set a new property of display. We'll set that to none, choose Save. Next, let's come over to our tooltip.js. Let's scroll up and let's find the mouseover function.
So inside of mouseover, after we detect the data type and pull the source, let's hit a Return. Let's target the tooltip container again, $('#tooltip_container').css. Another set of parentheses, semicolon. Inside we're going to target the display type. So 'display'.
Outside of the string literal, but still inside of the parentheses, comma, another string literal. This is going to be the value of display. We are going to type in 'block'. So on mouseover we're going to take that CSS property, assign it onto tooltip container, and override the display none back to display block. And now to hide the tooltip once we roll away from one of the tooltip items let's scroll all the way down. Let's find the mouseout function. Now inside of here we're going to target the tooltip container again.
$('#tooltip_container).css. Another set of parentheses, semicolon, inside we're going to target the display property again, display, comma, another string literal, type in none. Then hit Save.
Let's come back out to our HTML file. Choose File > Save All and then File > Preview in Browser. Let's hit Reload, you'll notice the tooltip no longer shows underneath the footer in the lower left-hand area. Rollover tooltip, display set to block, mousemove moves it around and when I roll away notice that the tooltip then sets display to none and disappears. At this point we've completed a basic tooltip. In the next movie we'll look at an optional effect of adding a fade in.
So we can have the tooltip fade in and then fade out instead of just popping on and off the screen.
There are currently no FAQs about Create a Tooltip with jQuery and Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.