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

Your preferred username that is used when logging in.

Tooltip positioning different in IE7, FF3.5, Chrome4 Created Jan 30, 2010

This thread is solved

Views: 3315     Replies: 5     Last reply Mar 26, 2010  
You must login first before you can use this feature

buggerKC

Posts: 2

Registered:
Jan 30, 2010

Tooltip positioning different in IE7, FF3.5, Chrome4

Posted: Jan 30, 2010

I have searched through alot of posts here in the Forum but have not found any issues similar to my experience. I am 90% sure this issue is with the way I have my page styled with absolute and relative positioning.

I have a map of a new community of houses. I am dynamically adding points on the map to represent which lots are available, sold, have a house for sale, etc. The map is a background of a div and the points are output relative to that DIV.

I got the tooltip to work (using img[rel] example found in another post) but the offset positioning is different in every browser I try. If I set the offset to look good in IE, its off in Firefox and Chrome.

Demo I am working with
http://www.creekwoodhills.com/homesites_demo.asp

Demo with NO OFFSET set in the javascript.
http://www.creekwoodhills.com/homesites_demo_no-ofset.asp

buggerKC

Posts: 2

Registered:
Jan 30, 2010

» Tooltip positioning different in IE7, FF3.5, Chrome4

Posted: Feb 1, 2010

Reply to: Tooltip positioning different in IE7, FF3.5, Chrome4, from buggerKC
I have determined that the positioning of the tooltip is being set based on the width of the browser. I think I can fix it by subtracting the current offset from the width of the browser.

papillon6

Posts: 6

Registered:
Feb 6, 2010

» » Tooltip positioning different in IE7, FF3.5, Chrome4

Posted: Feb 6, 2010

Reply to: » Tooltip positioning different in IE7, FF3.5, Chrome4, from buggerKC
Maybe the following issue helps you solving your problem...
I had problems concerning the tooltip position when the trigger element was placed inside another DIV-tag.

example:
<div style="width: 600px; margin: 0 auto; position:relative;">
<div id="trigger">trigger</div>
<div id="tooltip">some text</div>
</div>

This DIV was css-styled with "margin: 0 auto" (centered) AND "position: relative". Deleting "position: relative" solved the problem in my case and the tooltip is shown centered on top of the trigger element now.

AlanJ

Posts: 1

Registered:
Dec 8, 2009

» » » Tooltip positioning different in IE7, FF3.5, Chrome4

Posted: Feb 23, 2010

Reply to: » » Tooltip positioning different in IE7, FF3.5, Chrome4, from papillon6
I had the same problem and solved it by moving the tooltip outside of the positioned elements with a bit of jquery.

$('#tooltip').insertBefore('#container');

This way I didn't have to move the tooltip div's definition into another template. I do the same thing with overlays on pages where I use them.

arunjassiar

Posts: 4

Registered:
Mar 15, 2010

» » » » Tooltip positioning different in IE7, FF3.5, Chrome4

Posted: Mar 15, 2010

Reply to: » » » Tooltip positioning different in IE7, FF3.5, Chrome4, from AlanJ
Can you explain it more how it can be done to fix the tip position issue.

Darkflare

Posts: 1

Registered:
Mar 26, 2010

» » » » Tooltip positioning different in IE7, FF3.5, Chrome4

Posted: Mar 26, 2010

Reply to: » » » Tooltip positioning different in IE7, FF3.5, Chrome4, from AlanJ
This worked a treat thank you.

The idea is that you take the outter most Div id (in drupal #page) and insert the tooltip before it. for example here is mine:


$(document).ready(function() {
	$("#jumppers img[title]").tooltip({
		tip: '#tip',
	});
        //#tip is the name of my tool tip. 
        //#page is the outter most div on my website
	$('#tip').insertBefore('#page');
});

DF

•