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.
Now if you're putting your tooltip into an existing website, one problem that might pop-up is that the tooltip container is not actually matching the position of the mouse cursor. This can happen if you have an HTML element that is the parent of your tooltip container that has position properties on it. So to demonstrate what's happening here I'm going to add the position relative attribute onto my page container. So what this is going to do is now the tooltip container will orient itself based on the page container. The problem that arises here is that the browser as calculating the x, y position of the mouse based on the viewport, or the overall size or body tag of the web page, so now we have a disconnect between the two.
So to show you what that might look like I'm going to open this up in a browser. Now when the browser is small and I rollover these tooltips, you might not be able to notice that the tootip isn't aligned properly. But if I come in here and open the web browser up really wide and now rollover these items, you'll see that the offset is actually pretty substantial. So when I rollover these tooltips, what you'll notice is the amount of distance that this is off matches the amount of distance between the edge of the browser and the edge of my page container, and so it's this value that creates that discrepancy.
Again the browser is calculating from the viewport, the tooltip is now positioning itself based on the parent. So my first recommendation is to always put the tooltip container outside of any HTML elements that have absolute positioning. However, if it's a website that you're working on and you don't have access to put the tooltip in a place that's not affected by position, the jQuery instruction you want to look up is called offset. So what you can do is detect the offset of the parent that's doing the absolute positioning and then calculate or adjust the position of your tooltip in very much the same way we calculated the height and width positions.
Now this may take a few times and some trial and error to get the tooltip to align properly, if you're going to be overriding the offset. But once you figure that out you're going to get the exact same user experience that we have with the template that we used in this course. So now that we've completed our tooltip, in the next movie we'll take a look at where you might want to go from here.
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.