Accounting for other CSS-positioned elements


show more Accounting for other CSS-positioned elements provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create a Tooltip with jQuery show less
please wait ...

Accounting for other CSS-positioned elements

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 ...

Accounting for other CSS-positioned elements
Video duration: 2m 7s 54m 23s Intermediate

Viewers:

Accounting for other CSS-positioned elements provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create a Tooltip with jQuery

Subjects:
Developer Web
Software:
jQuery
Author:
please wait ...