onMouseOut event firing too soon

sneakyimp

I have a tooltip-type information pane that pops up to show a user what their current search parameters are for a fairly elaborate, multi-page search form.

The tooltip pane has links, so I want it to behave like a menu. The problem i'm having is that the onMouseOut event I have assigned to the tooltip popup fires even while the mouse is still over the DIV element that it is assigned to. I think it has something to do with tags within that DIV tag.

Does anyone know an elegant, brief way around this?

here is my .JS file which handles the tooltip popup followed by some html that defines a mouseover element and some tool tip source html.

var offsetx =  -100;
var offsety = 0;
var elementID="mytip"; // 

function findPos(obj) {
  var curleft = curtop = 0;
  if (!obj.offsetParent) {
    alert("Your browser does not support a necessary feature.  Please upgrade to a newer browser");
  }
  curleft = obj.offsetLeft
  curtop = obj.offsetTop
  while (obj = obj.offsetParent) {
    curleft += obj.offsetLeft
    curtop += obj.offsetTop
  }
  return [curleft,curtop];
} // findPos()

function showTip(obj, elSourceName){

  if(!document.createElement || !document.getElementById){
	alert("Your browser doesn't support this feature.  Please upgrade to a newer browser");
  }

  var sourceEl = document.getElementById(elSourceName);
  if (!sourceEl) {
	tip = 'TIP NOT FOUND';
  } else {
	tip = sourceEl.innerHTML;
  }

  if(!document.getElementById(elementID)){
	tipElement = document.createElement('div')
	tipElement.id = elementID	
	tipElement.style.display="none"
	tipElement.style.position="absolute"
	tipElement.innerHTML=" "
	document.body.appendChild(tipElement)
  }

  tipDisplay = document.getElementById(elementID)
  tipDisplay.innerHTML = tip
  tipDisplay.style.display = 'block'

  // HERE IS THE CHANGE
  tipDisplay.onmouseout = function() {
    this.style.display = "none";
  } // tipDisplay.onMouseOut()

  var objPos = findPos(obj)
  tipDisplay.style.left=objPos[0]+offsetx
  tipDisplay.style.top=objPos[1]+offsety

  if(tipDisplay.offsetLeft<0){
	tipDisplay.style.left=0
  }

  if(tipDisplay.offsetLeft+tipDisplay.offsetWidth>document.body.clientWidth){
	tipDisplay.style.left=document.body.clientWidth - tipDisplay.offsetWidth
  }

} // showTip()

function hideTip(){
  tipDisplay.style.display="none"
} // hideTip()

And this is my document where I create the tooltip source (id=tooltip_source)

<HTML>
<HEAD>
<TITLE>Popup Tooltip 1</TITLE>
<script language="Javascript" src="tooltip.js"></script>
<style>
.tip_spot {
  background-color:blue;
  color:white;
  font-weight:bold;
  cursor: hand;
  cursor:pointer;
}
.search_tooltip {
background-color:#00ff00;
font-size:small;
color:#444444;
}
</style>
</HEAD>
<BODY>
<h1>Popup Tooltip 1</h1>
<table width="100%" border="1">
  <tr>
    <td><span id="1" class="tip_spot" onmouseover="showTip(this, 'tooltip_source')" >hover here and see the tip</span></td>
  </tr>
</table><br>
<br>
<br>
<br>
<div id="tooltip_source">
<table width="150" class="search_tooltip">
  <tr>
    <td>  Here's where all the tooltip text and <a href="http://yahoo.com">links</a> and stuff will go.  I wanted to put quite a bit of text here actually just to demonstrate that the mouseout event was firing <b>prematurely</b>
<div>I can't seem to tell if it's because of nested div tags like this sentence</div>
<span>Or whether its span tags like this sentence</span>
<p>Paragraphs like this maybe?</p></td>
  </tr>
</table>
</div>
</BODY>
</HTML>