Extending the Hover display time 1

teblack · May 6, 2004

We have been asked to extended the amount of time that a tooltip value displays when the user hovers on a link. Is this even possible first of all, if so can someone point me or show me what is needed to do this?

Thanks in advance for your help with this.

TBlack -

LFI · May 6, 2004

I don't see where you can change the 'hang-time' of a tooltip at my favorite on-line CSS reference
(

http://msdn.microsoft.com/workshop/author/css/reference/css_ref_entry.asp?frame=true),

but you can mimic a tooltip and
set its time to whatever you want like this:

Code:

<html>
<head>
<script>
var interval;
function showTip(toolTipId, show)
{
 var tooltip = eval(toolTipId);
 if(show)
 {
  var mousex = event.x;
  var mousey = event.y;
  tooltip.style.display = 'inline';

[b]//You'll want to test these placement adjustments and 
// add additional ones for proximity to the bottom of the page[/b]
  if(mousey - tooltip.offsetHeight < 0)
   tooltip.style.top = mousey;
  else
   tooltip.style.top = mousey - tooltip.offsetHeight;

  if(mousex + tooltip.offsetWidth > document.body.clientWidth)
   tooltip.style.left = document.body.clientWidth - tooltip.offsetWidth;
  else
   tooltip.style.left = mousex;

  tooltip.style.visibility = 'visible';

[b]//change the 5000 to whatever you like to control
// the 'hang-time'[/b]
  interval = setInterval('showTip('+toolTipId+', false);',[b]5000[/b]);
 }//end if
 else
 {
  tooltip.style.visibility = 'hidden';
  tooltip.style.display = 'none';
  clearInterval(interval);
 }//end else
}//end showTip(var, var)
</script>
</head>
<body>
<span name='fname' onmouseover='showTip("fnameTooltip",true);' onmouseout='showTip("fnameTooltip",false);'>First name: <input type='text' name='fnameField' size='20' /></span>

<span name='lname' onmouseover='showTip("lnameTooltip",true);' onmouseout='showTip("lnameTooltip",false);'>Last name: <input type='text' name='lnameField' size='20' /></span>

<div id='fnameTooltip' style='position:absolute;display:none;visibility:hidden;background:yellow;'>This is where you enter your <i>first name</i>.</div>

<div id='lnameTooltip' style='position:absolute;display:none;visibility:hidden;background:yellow;'>This is where you enter your <i>last name</i>.</div>
</body>
</html>

Notice the hidden DIVs on the page. You'd need one per tooltip.

I hope this is useful for you.

--Dave

Vragabond · May 6, 2004

You could also go with the prescripted solution, such as [link=http://www.bosrup.com/web/overlib/]OverLib[/url].

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Extending the Hover display time 1

teblack

Programmer

LFI

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor