You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Tooltip position changes when the browser size changes Created Dec 9, 2009

This thread is solved

Views: 3995     Replies: 13     Last reply Dec 30, 2010  
You must login first before you can use this feature

bobbyw

Posts: 4

Registered:
Nov 23, 2009

Tooltip position changes when the browser size changes

Posted: Dec 9, 2009

I have a tooltip for an img element. I have the position and offset defined. This positioning looks fine with the screen resolution and monitor I'm using with the browser maximized.

$(document).ready(function() {
$(".introdetails img#1").tooltip({ 
 
        // use div.tooltip as our tooltip 
        tip: '.tooltip', 
 
        // use fade effect instead of the default 
        effect: 'slide', 
 
        // the time before tooltip is shown 
        delay: 400, 
 
        // tweak the position 
        position: "top center",         
        offset: [-100, 0], 
    });
});

If I Restore Down the browser window, the tooltips shift left. Styling the container didn't seem to work. Whatever the solution may be, I need the tooltip to always appear directly above the element no matter the browser window size.

Thanks in advance for the help!

Matt Crest

Posts: 3

Registered:
Dec 11, 2009

Same for scrollable content

Posted: Dec 11, 2009

Reply to: Tooltip position changes when the browser size changes, from bobbyw
I'm having a similar issue for an app that has a scrollable content area. The tooltips are basing their location off the initial load location, not the actual position of the elements.

bobbyw

Posts: 4

Registered:
Nov 23, 2009

Scrollable with Tooltips

Posted: Dec 14, 2009

Reply to: Same for scrollable content, from mattcrest
Yes, Matt that is my problem as well.

My site is using the scrollable functionality as well. My tooltips are located on the Introduction div.

Matt Crest

Posts: 3

Registered:
Dec 11, 2009

Suggestion: try qTip

Posted: Dec 14, 2009

Reply to: Scrollable with Tooltips, from bobbyw
I don't mean to pull anyone away from jQuery Tools (it's an amazing library!), but for this specific use case, I'm now using qTip. The location of the tips is as would be expected, even on scrollable divs, and I was able to get it to work with dynamically loaded content pretty easily.

Worth a look at least:http://craigsworks.com/projects/qtip/

bobbyw

Posts: 4

Registered:
Nov 23, 2009

thanks

Posted: Dec 14, 2009

Reply to: Suggestion: try qTip, from mattcrest
Blasphemy! Just kidding. Thanks, I'll check it out. Everything I end up making is usually a mash-up or based off a few different demos anyway.

sapincher

Posts: 1

Registered:
Feb 27, 2010

Fixed

Posted: Feb 27, 2010

Reply to: Tooltip position changes when the browser size changes, from bobbyw
Had this same problem. I fixed it by putting the tooltip outside of any parent elements except the <body> tags. Before, the tooltip was nested inside several divs which caused the tooltip to have a weird offset left property.

Now, the tooltip is at the same level as the main wrap divs around my content and it works just fine.

korsakov

Posts: 24

Registered:
Dec 1, 2009

Thanks for the hint!

Posted: Feb 28, 2010

Reply to: Fixed, from sapincher
Yes, the location is the problem! Thanks for your post!

dvelguru

Posts: 7

Registered:
Aug 17, 2009

Here is your fix for tooltip positioning relative to parent

Posted: Feb 28, 2010

Reply to: Thanks for the hint!, from korsakov
This is actually the correct answer


$(triggerElement).tooltip({
	relative:true,
});

You can check out the manual as well
http://flowplayer.org/tools/tooltip.html

I created a post a few days ago regarding the same issue and then deleted it after I decided to read the tooltips configuration property sheet. Low and behold, the answer for position control was there.

Hope this helps!

vit6

Posts: 7

Registered:
Dec 7, 2009

» Here is your fix for tooltip positioning relative to parent

Posted: Mar 1, 2010

Reply to: Here is your fix for tooltip positioning relative to parent, from dvelguru
relative:true,

I should have thought of that myself! No more moving tooltips with opened firefox sidebars! Wonderful, thank you!

arunjassiar

Posts: 4

Registered:
Mar 15, 2010

» » Here is your fix for tooltip positioning relative to parent

Posted: Mar 16, 2010

Reply to: » Here is your fix for tooltip positioning relative to parent, from vit6
It does not work in IE, can you send me sample code here.

tptompkins

Posts: 4

Registered:
Apr 7, 2010

» » » Here is your fix for tooltip positioning relative to parent

Posted: Apr 7, 2010

Reply to: » » Here is your fix for tooltip positioning relative to parent, from arunjassiar
I can't get this to work in IE either. I'm using IE 8. I can see half of my tooltip in IE 8 and it's positioned more to the upper right when compared to FF and Chrome.

I've tried all the fixes that people mention on the forum including moving the div to the top position just outside the body element but I get the same results regardless. Any other ideas?

Thanks,

Tommy

HeyJoel

Posts: 1

Registered:
Dec 30, 2010

» Here is your fix for tooltip positioning relative to parent

Posted: Dec 30, 2010

Reply to: » » » Here is your fix for tooltip positioning relative to parent, from tptompkins
If your having problems with the tooltip being relative to the browser rather than the trigger element, try encapsulating the trigger element and the tooltip inside a div with it's position set to relative.

This is because the tooltip uses absoulte positioning, even when you set it to 'relative' mode. Absolutely positioned elements will position themselves in relation to the first parent with the 'position: relative' attribute, or will otherwise use the root element:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

- Joel

gregor

Posts: 1

Registered:
Apr 20, 2010

» » Here is your fix for tooltip positioning relative to parent

Posted: Apr 20, 2010

Reply to: » Here is your fix for tooltip positioning relative to parent, from vit6
IE8 is spot on but no joy in Chrome.

My eyesight is lousy so I use the mouse wheel + <CTRL> to zoom in and out quite a bit. Zooming in either direction with Chrome leaves Tooltips way out of position. :-(

•