Tooltip difference between Firefox and Chrome

[Trek15]

This is driving me insane and i haven't been able to solve this problem for six hours now of constant struggle. I have no idea if this is even possible for anyone to find out without me giving out all my source-code, which i really don't want to do, but i really need to fix this damn thing anyways.

 

The only way i think you can replicate this problem is by visiting http://alturl.com/jhic in both Firefox and Google Chrome. The problem is that even though the code obviously is the same for both browsers, there's one tooltip missing in FF. When hovering the mouse over all button at the top in Chrome, they all produce a tooltip. But in FF, the first one, for the forum, doesn't seem to exist, so they have "slid left" one step, leaving the Whiteboard button without a tooltip.

 

This problem started after i added a seventh button to that bar today and it makes no sense to me why doing that makes FF mess up.

 

Please help me or i'll got no sleep!!  >

[oni-kun]

This is driving me insane and i haven't been able to solve this problem for six hours now of constant struggle. I have no idea if this is even possible for anyone to find out without me giving out all my source-code, which i really don't want to do, but i really need to fix this damn thing anyways.

 

The only way i think you can replicate this problem is by visiting http://alturl.com/jhic in both Firefox and Google Chrome. The problem is that even though the code obviously is the same for both browsers, there's one tooltip missing in FF. When hovering the mouse over all button at the top in Chrome, they all produce a tooltip. But in FF, the first one, for the forum, doesn't seem to exist, so they have "slid left" one step, leaving the Whiteboard button without a tooltip.

 

This problem started after i added a seventh button to that bar today and it makes no sense to me why doing that makes FF mess up.

 

Please help me or i'll got no sleep!!  >

 

The following browsers show the Forums tooltip:

Firefox 2.4

Firefox 3.5

Firefox 3.6b

Chrome latest

 

I'm not sure what version you're using.

[Trek15]

Guess i at least can add some part of the code since that should explain to you better than i ever could do.

 

This is the script for the tooltip function:

var htmltooltip={
tipclass: 'htmltooltip',
fadeeffect: [true, 300],
anchors: [],
tooltips: [], //array to contain references to all tooltip DIVs on the page

positiontip:function($, tipindex, e){
	var anchor=this.anchors[tipindex]
	var tooltip=this.tooltips[tipindex]
	var scrollLeft=window.pageXOffset? window.pageXOffset : this.iebody.scrollLeft
	var scrollTop=window.pageYOffset? window.pageYOffset : this.iebody.scrollTop
	var docwidth=(window.innerWidth)? window.innerWidth-15 : htmltooltip.iebody.clientWidth-15
	var docheight=(window.innerHeight)? window.innerHeight-18 : htmltooltip.iebody.clientHeight-15
	var tipx=anchor.dimensions.offsetx
	var tipy=anchor.dimensions.offsety+anchor.dimensions.h
	tipx=(tipx+tooltip.dimensions.w-scrollLeft>docwidth)? tipx-tooltip.dimensions.w : tipx //account for right edge
	tipy=(tipy+tooltip.dimensions.h-scrollTop>docheight)? tipy-tooltip.dimensions.h-anchor.dimensions.h : tipy //account for bottom edge
	$(tooltip).css({left: tipx, top: tipy})
},

showtip:function($, tipindex, e){
	var tooltip=this.tooltips[tipindex]
	if (this.fadeeffect[0])
		$(tooltip).hide().fadeIn(this.fadeeffect[1])
	else
		$(tooltip).show()
},

hidetip:function($, tipindex, e){
	var tooltip=this.tooltips[tipindex]
	if (this.fadeeffect[0])
		$(tooltip).fadeOut(this.fadeeffect[1])
	else
		$(tooltip).hide()	
},

updateanchordimensions:function($){
	var $anchors=$('*[@rel="'+htmltooltip.tipclass+'"]')
	$anchors.each(function(index){
		this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top}
	})
},

render:function(){
	jQuery(document).ready(function($){
		htmltooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
		var $anchors=$('*[@rel="'+htmltooltip.tipclass+'"]')
		var $tooltips=$('div[@class="'+htmltooltip.tipclass+'"]')
		$anchors.each(function(index){ //find all links with "title=htmltooltip" declaration
			this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top} //store anchor dimensions
			this.tippos=index+' pos' //store index of corresponding tooltip
			var tooltip=$tooltips.eq(index).get(0) //ref corresponding tooltip
			if (tooltip==null) //if no corresponding tooltip found
				return //exist
			tooltip.dimensions={w:tooltip.offsetWidth, h:tooltip.offsetHeight}
			$(tooltip).remove().appendTo('body') //add tooltip to end of BODY for easier positioning
			htmltooltip.tooltips.push(tooltip) //store reference to each tooltip
			htmltooltip.anchors.push(this) //store reference to each anchor
			var $anchor=$(this)
			$anchor.hover(
				function(e){ //onMouseover element
					htmltooltip.positiontip($, parseInt(this.tippos), e)
					htmltooltip.showtip($, parseInt(this.tippos), e)
				},
				function(e){ //onMouseout element
					htmltooltip.hidetip($, parseInt(this.tippos), e)
				}
			)
			$(window).bind("resize", function(){htmltooltip.updateanchordimensions($)})
		})
	})
}
}

htmltooltip.render()

 

You're supposed to give DIVs "class=htmltooltip" and Anchors or Inputs "rel=htmltooltip", and what this does is make a custom tooltip appear on the item of your choice on the page.

 

This is an example i'm using for a button on the bar with a tooltip:

 

Tooltip text:

 

<div class="htmltooltip" align="center" style="width:300px">

<?php
global $context;
if ($context['user']['is_guest'])
echo '<p><font style="font-size:14px" face="MS Serif">Forum tooltip text.</font></p><img src="images/forum.jpg" alt="Forum" />';
else
{
echo 'Recent Topics';
}
?>

</div>

 

Button on the bar:

 

<?php
   global $context;
   if ($context['user']['is_guest'])
echo ' <li><input style="width: 43px" value="Forum" class="btb" type="button" rel="htmltooltip" onmouseover="this.className=\'btb btbhov\'" onmouseout="this.className=\'btb\'" onclick="javascript:loadintoIframe(\'frame\', \'http://www.website.com/forums/\')" /></li>';
   elseif ($user_info['posts'] >= 1)
echo ' <li><input style="width: 43px" value="Forum" class="btb" type="button" rel="htmltooltip" onmouseover="this.className=\'btb btbhov\'" onmouseout="this.className=\'btb\'" onclick="javascript:loadintoIframe(\'frame\', \'http://www.website.com/forums/\')" /></li>';
   elseif ($user_info['groups']['0'] == 1 or $user_info['groups']['0'] == 2)
echo ' <li><input style="width: 43px" value="Forum" class="btb" type="button" rel="htmltooltip" onmouseover="this.className=\'btb btbhov\'" onmouseout="this.className=\'btb\'" onclick="javascript:loadintoIframe(\'frame\', \'http://www.website.com/forums/\')" /></li>';
   else
echo ' <li><input style="width: 43px" value="Forum" class="btb" type="button" rel="htmltooltip" onmouseover="this.className=\'btb btbhov\'" onmouseout="this.className=\'btb\'" onclick="javascript:loadintoIframe(\'frame\', \'http://www.website.com/forums/\')" /></li>';
?>

 

So i had six of these with different names and URLs and such, and today when i added a seventh one, FF refused to show them all.

[Trek15]

The following browsers show the Forums tooltip:

Firefox 2.4

Firefox 3.5

Firefox 3.6b

Chrome latest

 

I'm not sure what version you're using.

 

Thanks. Hmm,well i have FF 3.5.7 and obviously a working version of Chrome. But i don't think FF has updated while i've been working with this. That tooltip script has worked fine for years in FF.

[Trek15]

I wonder if i did something wrong when adding the seventh button. But the fact that it works in Chrome just makes me angry, because if it didn't work in either browser i could at least try and start over.