Flicker problem with mouseovers and divs

[Jenna]

Hello all, javascript novice here.

On a customer request, I came up with what I thought was a pretty cute, transparent tool tip script.

You can see the demo online here: http://www.designbyfamous.com/6/b.html

Of course, I'm having a flicker problem. If you move your mouse down the blocks, it doesn't exist, or is at least fairly unnoticeable. However, if you move up the blocks, the flicker is, in my customer's words, "pretty severe". Ugh.

Relevant code:

HTML:

<div class="bnav">
 
 	<div class="hextop">
 		<a href="#" onClick="hidetip();" onmouseover="showtip('#CCCCCC','#666666','TEXT');" onmouseout="hidetip();"><div id="uno">1,358</div></a>
 		<a href="#" onClick="hidetip();" onmouseover="showtip('#CCCCCC','#666666','TEXT');" onmouseout="hidetip();"><div id="dos">5,283</div></a>
 		<a href="#" onClick="hidetip();" onmouseover="showtip('#CCCCCC','#666666','TEXT');" onmouseout="hidetip();"><div id="tres">391</div></a>
 	</div>
 	<a href="#" onClick="toggle('check'); hidetip();" onmouseover="showtip('#99CCFF','#0066FF','TEXT');" onmouseout="hidetip();"><img src="images/b_check_off.gif" name="check" id="check" width="32" height="14"></a>
 	<a href="#" onClick="toggle('plus'); hidetip();" onmouseover="showtip('#99FF33','#336601','TEXT');" onmouseout="hidetip();"><img src="images/b_plus_off.gif" name="plus" id="plus" width="32" height="14"></a>
 	<a href="#" onClick="toggle('purple'); hidetip();" onmouseover="showtip('#9999FF','#6633CC','TEXT');" onmouseout="hidetip();"><img src="images/b_purple_off.gif" name="purple" id="purple" width="32" height="14"></a>
 	<a href="#" onClick="toggle('stop'); hidetip();" onmouseover="showtip('#FF3300','#CC3300','TEXT');" onmouseout="hidetip();"><img src="images/b_stop_off.gif" name="stop" id="stop" width="32" height="14"></a>
 
 </div>
 
 
 <!-- hidden div for tooltip -->
 <div id="tooltip">check<div id="toolback"><!-- transbox --></div></div>

CSS:

#tooltip {
 	position: absolute;
 	width: 76px;
 	height: 13px;
 	color: #000000;
 	text-align: center;
 	font-size: 9px;
 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 	border: 1px solid Red;
 	visibility: hidden;
 	z-index: 1000px;
 }
 
 #toolback {
 	position: absolute;
 	width: 76px;
 	height: 13px;
 	opacity: .50;
 	filter: alpha(opacity=50);
 	-moz-opacity: 0.5;
 	background: Red;
 	z-index: 999px;	
 	visibility: hidden;
 }

javascript:

// find mouse position
 window.onload = init;
 function init() {
 if (window.Event) {
 	document.captureEvents(Event.MOUSEMOVE);
 }
 document.onmousemove = getPosition;
 }
 
 function getPosition(e) {
 x = (window.Event) ? e.pageX : event.clientX;
 y = (window.Event) ? e.pageY : event.clientY;
 }
 
 
 // show tooltip
 function showtip(color,border,text) {
 var tooltip = document.getElementById("tooltip");	
 var toolback = document.getElementById("toolback");	
 
 //move to be better situated with the cursor
 var Yadjust= y - 14;
 
 //change the color
 	toolback.style.background=color;
 	tooltip.style.borderColor=border;
 
 //position it
 	tooltip.style.left=x + "px";
 	tooltip.style.top=Yadjust + "px";
 	
 //position background in tooltip
 	toolback.style.left=0 + "px";
 	toolback.style.top=0 + "px";
 	
 //add text
 	document.getElementById("tooltip").firstChild.nodeValue=text;
 
 // make it appear
 	tooltip.style.visibility="visible";
 	toolback.style.visibility="visible";
 }
 
 function hidetip() {
 var tooltip = document.getElementById("tooltip");	
 var toolback = document.getElementById("toolback");	
 	
 	tooltip.style.visibility="hidden";
 	toolback.style.visibility="hidden";
 }

I have googled and searched here, and everything about flicker seems be regarding background images. My script doesn't use any images.

Can anything be done to fix the flicker?

(As always, thank you so much for any help. These forums are always such an invaluable resource).

[DougBTX]

Is the tooltip hiding itself when you move your mouse over it?

Douglas

[Jenna]

Ah! Excellent question! That would make sense, actually. The browser is reading that as onmouseout, I guess?

So that is more than likely the problem, now I just have to figure out the solution. At the moment, I am completely stumped. Any suggestions on how to proceed?

[jimfraser]

One way to do it is to move the tooltip with the mouse so that onmouseout event never fires.

You'll need to distance the tooltip a bit further from the pointer for that to work.

[DougBTX]

I nver actually read the code you posed, but I assume that it would be possible to set the parent of the tooltip to be the thing you are hovering over. You'll need a bit more code to work out xactly what top/left to set.

Say: hoveredOverElement.appendChild(tooltipElement)

Then the tooltip would be part of the thing you are hovering over, so you wouldn't go "out" of it if you move the mouse over the tooltip.

Another option would be to calculate the onmouseout yourself. So rather than catching the onmousemove of the element you want to tooltip to be shown for, instead you watch window.onmousemove, and work out with a little bit of maths when the mouse is over the thing you want to show the tooltip for. I think that thins is how the Yahoo drag drop manager works.

Douglas

[Jenna]

Thanks y'all.