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.
To begin repositioning our tooltip- container let's come back to our tooltip.js file. Let's scroll down here, and what we're going to do is focus on the mousemove section. So hit a few returns inside of here. So what we want to do first is set a variable. So we're going to type var tooltipWidth, we're going to set that =$, parentheses, tick marks inside first string literal, we're going to search for the tooltip-container, ('# tooltip_container').outerWidth();.
Next line, var tooltipHeight, we're going to set that =$('#tooltip_container').outHeight();. Now the tooltipWidth should always be 200 because we set that in a CSS, but the tooltipHeight is actually going to vary based on how much HTML or text-content we're putting in there.
So these two variables are going to give us the ability to refer back and know exactly how high and how wide the tooltip-container is with its new content. With those two variables created, let's hit a few line returns. Let's start with $('#tooltip_ container').css('left',()+'px'); Inside of these parentheses we want to do a calculation, we're going to type e.pageX then we're going to subtract 20 pixels.
So what this script is doing is it's taking e, which is the event up here for mousemove, and what we're doing is taking the pageX. Which is the X position of the cursor subtracting 20 pixels from that so that the tip is a little bit to the left of the cursor and then adding the px here. So that the statement here becomes a valid property of the CSS value for left. Let's copy this entire line, paste it on the next line, let's change left in here to top, let's change e.pageX to pageY, and then here we're going to add 20 pixels, which is going to make the position of the object 20 pixels lower on the screen.
So these two values are going to position the tooltip down and a little bit to the left of where the cursor is. So at this point let's hit File > Save, let's come back to our index.html, choose File > Save All and then Preview in Browser. Now when I roll over my tooltip, we can see that the position is a little bit to the left and 20 pixels down from the point of my cursor, and as I move the mouse that mousemove function will constantly update that to the new properties, and the same thing for this side as well.
Now you'll notice that the tip is actually touching the right-hand side of the browser, in the next movie we'll do a page width detection and make sure that the tip never actually touches the right or left side of the browser.
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.