Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96277 Viewers
56 Video lessons · 110050 Viewers
71 Video lessons · 78859 Viewers
131 Video lessons · 37841 Viewers
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.