Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Saving web graphics from Photoshop
- Creating the tooltip container
- Adding the jQuery $(document).ready() and mouse events
- Detecting and setting HTML-based tooltips
- Attaching the tip container to the mouse
- Setting the tooltip to fade in and out
- Accounting for other CSS-positioned elements
Skill Level Intermediate
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.