Advanced Search

Results 1 to 3 of 3

Thread: Tooltip - Table Borders still visible after tooltip has closed.

  1. #1
    Join Date
    Feb 2008
    Posts
    36
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Tooltip - Table Borders still visible after tooltip has closed.

    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.
    Last edited by Cyclone; 10-09-2008 at 05:59 AM.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.


    Code:
    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);
    }
    Code:
    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);
    }
    Code:
    function hideTip() {
    	if (!tooltip) return;
    	t2=setTimeout("tipcss.display='none'",100);
    	tipOn = false;
    }
    Code:
    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.

  3. The Following User Says Thank You to codeexploiter For This Useful Post:

    Cyclone (10-09-2008)

  4. #3
    Join Date
    Feb 2008
    Posts
    36
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Works good now. Thanks!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •