onMouseOver tooltip not working in firefox

**canadaka** · Nov 4, 2006 23:20

I use a fairly simple bit of html/css/javascript for toolip/popup boxes on my site www.canadianhottie.ca but they do not work in firefox. I would like to fix this, they work in IE6 and 7.

Here is a test page, where I have just the code for the tooltip
http://www.canadianhottie.ca/test.html

Here are the 3 parts

html

HTML Code:

<a href="" target="_blank" onMouseOut="Hide(Popup1)" onMouseOver="Show(Popup1)" onMouseMove="Show(Popup1)"><img src="" border="0" /></a>

<div id="Popup1" class="transparent">tooltip content</div>

javascript

Code:

<script language="JavaScript" type="text/javascript">
<!--

/* this function shows the pop-up when
 user moves the mouse over the link */
function Show(Popup)
{
	/* get the mouse left position */
	x = event.clientX + document.body.scrollLeft;
	/* get the mouse top position  */
	y = event.clientY + document.body.scrollTop;
	/* display the pop-up */
	Popup.style.display="block";
	/* set the pop-up's left */
	Popup.style.left = x;
	/* set the pop-up's top */
	Popup.style.top = y;
}
/* this function hides the pop-up when
 user moves the mouse out of the link */
function Hide(Popup)
{
	/* hide the pop-up */
	Popup.style.display="none";
}
	//-->
</script>

CSS

Code:

<style>
.transparent {
    background-color: #E9E9E9;
    border: 1px solid black;
    display:none;
    width:150px;
    position:absolute;
    color:#333333;
}
</style>

how can I get this too work in firefox? why doens't it work?
thanks in advance for any help.

**JVLB** · Nov 4, 2006 23:34

The id value should be passed as a literal string, as in: Show('Popup1')

You then should acquire the object through (in this case, no quotes, since we are using the passed parameter, not a string literal): document.getElementById(Popup)

Assign the returned object to a variable, as in: targ_div = document.getElementById(Popup);

Then apply your CSS modifications, as in: targ_div.style.~etc.

**canadaka** · Nov 5, 2006 00:08

thanks for the reply, I have to admit im a javascript n00b, I usualy just trial and error it until something works.

document.getElementById(Popup); does this go inside one of the 2 functions or outside?

Assign the returned object to a variable, as in: targ_div = document.getElementById(Popup);

not sure what you mean here, does this go inside the functions? is "targ_div = document.getElementById(Popup);" the actual code i enter?

basically i need a dumbed down response. and with the css, what you say makes it sound like each popup would need a css class?
right now i have one class for all popups ".transparent"

Show(Popup1) id="Popup1"
Show(Popup2) id="Popup2"
ext.... i've done over a hundred on the same page.

**JVLB** · Nov 5, 2006 09:14

The document.getElement~ code needs to be in each function. The sample code can be used verbatim, or you can choose a variable name other than targ_div. Actually, it would be slightly better to make the variable local to the scope of the containing function by declaring it as: var targ_div = document.getElementById(Popup);

Using display:none basically negates any other style rules; it removes the element from the document, completely. That's all you need to do to get an element to disappear. Had you not used position:absolute, the document would reform to reflect the element's removal. With position:absolute the element is already removed from the document's flow and is displayed independently of it.

If you are doing a large number of these transitions you probably should apply an event handler. Here's a quick example using visibility instead of display:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.trans{height:100px;width:400px;}
</style>
<script type="text/javascript">
window.onload=function(){  //initiate after page has finished loading
  var divs=document.getElementsByTagName('div');  //get all the divs
  var divs_ln=divs.length;
  for(var i=0;i<divs_ln;i++){
	if(divs[i].className.indexOf('trans')!=-1){
	  divs[i].onmouseover=addTrans;
	}
  }
}
function addTrans(){
  this.style.visibility="hidden";
}
</script>
</head>
<body>
<div class="trans" style="background-color:#dee;"></div>
<div class="trans" style="background-color:#ded;"></div>
<div class="trans" style="background-color:#dde;"></div>
<div class="trans" style="background-color:#eed;"></div>
<div class="trans" style="background-color:#edd;"></div>
</body>
</html>

**canadaka** · Nov 5, 2006 15:13

hmm ok.. this confused me even more, all this does is show 5 boxes that don't hover, and when the mouse is placed over them they disapear to never come back.

also with the above I dont see how to attach a div to an element.
in my code, the <a href> tag that containts the onmouseover events is the trigger, and the divs are what is displayed in the tooltip window.

doing some more experimenting, removing the following javascript makes the tooltip appear and disapear in firefox, but it no longer follows the mouse like it used to.
[QUOTE]
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop;
[QUOTE]

**canadaka** · Nov 5, 2006 15:28

this is what i got now, it works perfectly in IE and now at least shows the tooltip in Firefox, just doens't follow the mouse pointer.

HTML Code:

function Show(Popup)
{
	var Popup = document.getElementById(Popup);
	
	if (navigator.appName == "Microsoft Internet Explorer") isIE = true; else 	isIE = false;
	
	if (isIE) { 
		x = event.clientX + document.body.scrollLeft;
		y = event.clientY + document.body.scrollTop;
	}

	Popup.style.display="block";
	Popup.style.left = x;
	Popup.style.top = y;
	
}

function Hide(Popup)
{
	var Popup = document.getElementById(Popup);
	Popup.style.display="none";
}

**JVLB** · Nov 5, 2006 20:41

If you lose the:

if (navigator.appName == "Microsoft Internet Explorer") isIE = true; else isIE = false;

and the:

if (isIE)

it should work on most browsers, if they have JavaScript enabled. While they won't follow the mouse, CSS tooltips are more reliable.

User Tag List

Thread: onMouseOver tooltip not working in firefox

Thread Tools

Display

onMouseOver tooltip not working in firefox

Bookmarks

Bookmarks

Posting Permissions