New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Accounting for other CSS-positioned elements

From: Create a Tooltip with jQuery and Dreamweaver

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

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

Show transcript

This video is part of

Image for Create a Tooltip with jQuery and Dreamweaver
Create a Tooltip with jQuery and Dreamweaver

18 video lessons · 4156 viewers

Chris Converse
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.