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.
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 this is going to do is now be tooltip_container will orient itself based on the page container. The problem that arises here is that the browser is 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 roll over these tooltips, you might not be able to notice that the tooltip isn't aligned properly. But if I come in here and open a web browser up really wide, and now roll over these items, you'll see that the offset is actually pretty substantial. So when I roll over 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.
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've 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 had with the template that we used in this course. So now that we've completed our tooltip, in the next movie we will take a look at where you might want to go from here.
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.