[Solved] Tooltip position within a jQuery UI Tab off in IE6 and IE7

[spinlock]

Hi there,

I'm having a problem getting qtip to appear in the right position with a jQuery UI tab. This problem only appears with IE6, and IE7 the tooltip appears above the tabs instead of within the tabs.

IE8, Safari, FF3+ work fine.

Basically I have tables within the tabs and each table has a tooltip that activates on click.

Here's the qtip code (running build#54 right now).

JS Code

// <![CDATA[
$(document).ready(function() {
	// Show tabs when the page is loaded
	/*! This needs some code for people not using javascript */
	$(".has-javascript-hide").show();
 
	// animated progress bar is loaded and animated using javascript
	$(".progress").animatedprogressbar();
 
 
	// Set up the tabs
	$("#tabs").tabs({ cookie: { expires: 60 } });
 
	$('.tip-trigger').qtip({
	show: {
   		solo: true,
   		when: {
   			event: 'click'
   		},
   		effect: {
   			type: "slide",
   			length: 100
	   	}
   	},
   	hide: {
   		when: {
   			event: 'unfocus'
   		}
   	},
	position: {
    	corner: {
        	target: 'topRight',
         	tooltip: 'bottomLeft'
      	}
   	},
   	style: {
   		tip: 'bottomLeft',
   		name: 'light',
   		border: {
        	width: 3,
         	radius: 8,
         	color: '#6699CC'
      	}
   	}});
 
});
// ]]>

and here's the structure (general) of the tabs

JS Code

<!-- Begin tabs //-->
		<div id="tabs" class="has-javascript-hide display-none">
			<ul>
				<li><a class="tab-selector" title="overview" href="#overview">Overview</a></li>
			         <! -- MORE TAB SELECTORS HERE //-->	
			</ul>
			<div id="overview">
<!-- Table with content and tooltip links //-->
                         </div>
                         <!-- MORE TABS //-->
                   </div>

any help/workaround would be great as this is a really frustrating problem on two very frustrating browsers. I can specify javascript/css to run depending on browser but I don't even know what that code would be...

[Steve]

I've also got this problem with IE7 compatibility mode (havent checked IE6), and Nightly Build 54.

[spinlock]

I had to resort to some hackery to get this working properly. I'm using HTML 4 strict so I can't even detect the browser version using jQuery.support, ended up using the deprecated jQuery.browser items.

basically I checked jQuery.browser for msie and <= 7 and set the position.x and y to offset correctly so that they showed up in the tabs. It seems to be a global offset problem so changing the position just needed to happen at document.load.

[Craig]

Are both you guys using the nightly 54 revision?

[Squashed]

I'm also seeing differences in IE7. It would appear to be due to positioning elements. Please see attached screen shots for my test results. Not sure if it's jQuery or qTip.

With jQuery 1.3.2 and qTip 1.0.0 rc3, the result in IE7&8 is the same and looks correctly positioned.

With jQuery 1.4.2 and qTip rev54, IE8 is almost correct, IE7 is wrong.

Hope this helps.

---

Even in IE8 there is a difference between qTip 1.0 rc3 and rev54. See attached screenshot. The tooltip is not positioned on the corner in the latest version. It's tip overlaps the target element.

[Squashed]

Further update:

Adding the following to the qtip position option fixed IE7 for me, but not IE6.

JS Code

position: {
    type: 'fixed',                    // This appears to fix IE7, but not IE6
    etc.

[BiffBangPow]

(2nd July 14:23)spinlock Wrote:  I had to resort to some hackery to get this working properly. I'm using HTML 4 strict so I can't even detect the browser version using jQuery.support, ended up using the deprecated jQuery.browser items.

basically I checked jQuery.browser for msie and <= 7 and set the position.x and y to offset correctly so that they showed up in the tabs. It seems to be a global offset problem so changing the position just needed to happen at document.load.

Hi Spinlock - do you have code for the position switch on this?
I'm suffering the same problem and struggling to write a happy piece of code...

[Craig]

Do either of you guys have a live demo I can take a look at?

[Dante]

Just append your qtip to your tab instead of appending it to the body.

JS Code

$("#yourElementID").qtip({
   position: { container: $("#yourTabID") },
   content: "Your element tooltip message."
});