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 the first detection we're going to do is for the pageWidth, so that we know whether we need to align the tooltip to the right or left, depending on where the mouse cursor is. So after the variables for tooltip width and height, let's come in here and declare another variable, var, space, pageWidth. We're going to set that equal to = $(), tick marks for string literal 'body', outside of the parentheses .width(); so the width of the overall browser is now going to be stored in this pageWidth variable.
So what we want to do inside of here is type $() tick marks for string literal, pound sign ('#tooltip_container').css();. Inside of the parentheses for CSS, two tick marks for string literal, then set the 'left' property. Outside of the string literal, but still inside of the parentheses for CSS, I'm going to type comma, another set of parentheses e.pageX- toolTipWidth, let's come up here and copy that variable name.
Let's paste it inside of there and then plus 20 pixels, outsides of the parentheses, plus sign, two tick marks for string literal and then px. So what this is going to do is take the toolTipWidth that we calculated earlier and subtract that from the pageX position, so that the tooltip will always be offset from the cursor, based on the width of the actual tooltip itself. Let's come down to the bracket for the conditional statement.
Let's add an else statement with brackets, and then let's come down here and let's grab the rule we have down here. Let's cut that and paste it inside of the else statement. So if the pageX is less than the pageWidth divided by 2, so we know on the left-hand side of the screen, we'll continue to leave the tooltip_container positioned to the right, which is what we had before we did the width detection. Let's hit Save, let's come back to our browser, let's hit Reload.
So now in our browser, I'm going to come up here and rollover a tooltip that's on the left-hand side of the screen, and we can see that the tooltip aligns to the left and goes further over into the right-hand side, and if I rollover the tooltip on the right-hand side, the tooltip aligns to the right and more of the content shows over in the left-hand side. And this is dynamic as well, so if I come down here and collapse this down so that we have the text over here, wrapping around the columns, this side will align over to the left and this side will align over to the right.
So now that we're properly detecting for right and left, in the next movie we're going to add a tooltip into the logo and we're going to detect for height as well.
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.