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.
Let's paste that inside of here; > pageWidth/2. So this will tell us that the mouse position is greater than pageWidth divided by 2 which means it's on the right-hand side of the screen. So if this is true, let's come inside of this if statement and what we're going to do is target the tooltip container. So dollar sign, parentheses, ticks marks inside for a string literal, pound sign, tooltip_container, outside of the parentheses .css, parentheses, semicolon, inside of the parentheses for css, tick marks for a string literal.
We're going to set the left property, then a comma. Then another set of parentheses. Inside here, we're going to put e.pageX. Then, we're going to subtract the tooltip width. So let's come up here to the variable we declared earlier; tooltipWidth. Let's copy that, let's paste it down here. Then we're going to add 20 to that. Then, outside of the parentheses, plus sign, two tick marks for a string literal, and then px.
So what's happening here is we're taking the X position of the mouse, we're subtracting the total width of the tooltip, and then adding in those 20 extra pixels, so we get that slight offset. And if this is not the case, which means we are on the left-hand side of the screen, let's come down here and type else, beginning and ending bracket, split those open. Let's scroll down and let's come down here and grab this statement, setting the left property to what we had before, and let's paste that into the else area.
So this statement actually positions the tooltip to the left where the extra content goes over toward the right, which is we what we had before we did this detection. So let's hit File > Save. Let's come back to index.html, File > Save All and let's preview this in a browser. Inside the browser let's hit Reload. If I come over here and roll over the regular tooltip, we see that the tooltip hangs over to the right-hand side. But, if I come over here to the right- hand side, notice that the tooltip now hangs over into the left-hand side.
So as I move my cursor to the rightmost area where we're triggering the tooltip, the tooltip won't touch the edge of the browser, it actually goes inward. Now to test this even further, I am going to condense the web browser down so that that anchor link in the center now wraps across two lines. Now if I roll over on the portion of the link on the right-hand side, the tooltip aligns to the left, and if I roll over the other side which is closest to the left, the tooltip orients to the right. So at this point, we have the horizontal detection working, and we don't have the tooltip touching either side of the browser.
In the next movie, we'll work on setting the height detection.
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.