PDA

View Full Version : Resolved Tooltip - Table Borders still visible after tooltip has closed.



Cyclone
10-07-2008, 02:57 AM
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
10-07-2008, 03:32 AM
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
10-09-2008, 05:58 AM
Works good now. Thanks!