Tooltip - Table Borders still visible after tooltip has closed.

[Cyclone]

Hi,

http://www.inspiredvisuals.com/test.html

When you place your mouse over the "Shot Info" link a tooltip pops up and loads a page. When the mouseout event is called the tooltip disappears but the table borders are still visible.

How can I set the table borders to to be hidden when the tooltip is hidden?

Thanks.

[codeexploiter]

If you make the highlighted changes in the following code snippets then the border issue you've reported can be solved. Basically you avoid using the 'visibility' property and start using 'display' property.

function doTooltip(evt,num,Xposition,Yposition) {
	if (!tooltip) return;
	if (t1) clearTimeout(t1);	if (t2) clearTimeout(t2);
	tipOn = true;

	offX = Xposition
	offY = Yposition

	// set colors if included in messages array
	if (messages[num][2])	var curBgColor = messages[num][2];
	else curBgColor = tipBgColor;
	if (messages[num][3])	var curFontColor = messages[num][3];
	else curFontColor = tipFontColor;
	if (ie4||ie5||ns5) {
		var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
		tipcss.backgroundColor = curBgColor;
	 	tooltip.innerHTML = tip;
	}
	if (!tipFollowMouse) positionTip(evt);
	else t1=setTimeout("tipcss.display='block'",100);
}

function positionTip(evt) {
	if (!tipFollowMouse) {
		standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
		mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
		mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	}
	// tooltip width and height
	var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
	var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
	// document area in view (subtract scrollbar width for ns)
	var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
	var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
	// check mouse position against tip and window dimensions
	// and position the tooltip
	if ((mouseX+offX+tpWd)>winWd)
		tipcss.left = mouseX-(tpWd+offX)+"px";
	else tipcss.left = mouseX+offX+"px";
	if ((mouseY+offY+tpHt)>winHt)
		tipcss.top = winHt-(tpHt+offY+Yposition)+"px";
	else tipcss.top = mouseY+offY+"px";
	if (!tipFollowMouse) t1=setTimeout("tipcss.display='block'",100);
}

function hideTip() {
	if (!tooltip) return;
	t2=setTimeout("tipcss.display='none'",100);
	tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; display:none; z-index:100"></div>')

As I've mentioned above you can find all the changes made in higlighted mode.

Hope this helps.

[Cyclone]

Works good now. Thanks!