Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
So now we're going to add in detection for the pageHeight. This is going to allow us to do two things; one, we can put the tooltip_ container above the cursor, and two, we can make sure that the tooltip doesn't touch the top of the browser. Now in order to get a link into the top of our page let's come back to our index.html file. In the heading area, we have an anchor link with the class of logo, let's come in here and add our tooltip properties to this link. First, let's add a second class onto here, so after logo inside of the value for class, let's hit a space, let's add in tooltip.
Now after the attribute for href, let's add in data-tip-type, equals, two quotes, put in "text". Let's add one more attribute, data-tip- source, equals, two quotes, and I'll just type in here, "This is the logo". Let's hit Save, now the logo will act as a tooltip as well, let's come to back to our tooltip.js file.
And if it is, what we're going to do inside up here is target the tooltip_container, so $() tick marks for string literal, a pound sign ('#tooltip_container'), outside of the parentheses we're going to type .css () then a semicolon, inside of the parentheses another string literal. We're going to type 'top,' outside of the string literal hit comma, another set of parentheses, outside of the parentheses plus another string literal 'px'.
Now inside of the parentheses, e.pageY-, then another set of parentheses, now inside of the innermost parentheses, let's come up here and let's copy toolTipHeight, copy that variable name, let's come down here, let's paste that and then put +20. So what we're doing here is taking the height of the tooltip, adding 20 pixels and then subtracting that from the position of the cursor. Now what this is going to do is position the tooltip above where the cursor intersects with any HTML element with the tooltip class.
Now let's add an else onto this condition, so after the bracket type else, another set of brackets. Let's come down here and let's take the css 'top' property we were using before. Let's cut that to the clipboard, let's paste it into here. Now to test this let's choose Save, let's come back up to the browser and hit Reload. Now you'll see our tooltips are now going above the cursor. Now while I come up here and rollover the logo, notice that the tooltip is now activated for the logo, but the position of the tooltip is now showing up underneath the position of the cursor.
So now that we're properly detecting for height and width position, in the next movie we'll hide the tooltip, so that it only shows when somebody 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.