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 write the necessary HTML and activate the tooltip with jQuery, as well as add positioning and effects.
Now to hide the tooltip, we are first going to set a CSS property. Let's come back to tooltip.css. Under the id for tooltip_container, after border-radius, let's hit a Return. Let's set a property of display, set that equal to none, choose Save, let's come back to tooltip.js, let's scroll up and let's look for the mouseover function. Inside up here, after we do our two detections, one for the data-tip-type and one for the source, let's add in an instruction to target the tooltip container, dollar sign, parentheses, tick marks for string literal, pound sign, tooltip_container, outside of the parentheses .css, parentheses, semicolon, inside of the parentheses two tick marks for a string literal.
First property we are going to set is display. Outside of the string literal, comma, two tick marks for the value, we are going to set this to 'block.' That's going to turn that from being a display none, into an object that has a display type. Now that's in the mouseover, let's scroll down to the mouseout, and inside of the mouseout function, let's target the tooltip_container again, dollar sign, parentheses, string literal, pound sign, tooltip_container, outside of the parentheses .css, beginning and ending parentheses, inside two tick marks, set display, second string literal. We are going to set that back to none.
Then we are also going to set one more property here. After the parentheses for css, we are going to set .html, another set of parentheses and a semicolon, two tick marks inside for a string literal. So in addition to setting the display to none, we want to wipe out all of the HTML that we have put inside of that tooltip container. So that when we roll out, everything inside is going to be set to null, and then we'll set the display to none. To test this, let's choose Save, let's come back out to the operating system, let's reload this in the browser. Notice we don't see the tooltip in the lower left-hand corner here, and then I roll over my tooltips, they pop up, and when I move away, they disappear completely.
So now that our tooltip is properly functioning, next we'll take a look at adding an optional fade in effect, where we can fade the tooltip in and out based on whether a user rolls over a tooltip item.
There are currently no FAQs about Create a Tooltip with jQuery.
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.