PDA

Click to See Complete Forum and Search --> : Tooltip Question

jinkas
10-06-2003, 02:24 PM
I'm designing a tooltip that pops up onmouseover and disappears after five seconds, never to return again. However, when the mouse is moved after entering the target area but before the five seconds is up the tooltip blinks out and then won't come back. The won't come back is good...that's what I want it to do. But I don't want it to go away so quickly. Where should I put the onmouseover/onmouseout pair to avoid this problem? Thanks!

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tooltip Test</title>
<script type="text/javascript">
<!--
var globalObject;
var wasShown = 0;

function show(object) {
if (wasShown == 0) {
var speed = 5000;
globalObject = object;
if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'visible';
else if (document.all)
document.all[object].style.visibility = 'visible';
setTimeout('hide(globalObject)',speed);
}
}
function hide(object) {
if (globalObject == object) { }
else { globalObject = object; }
if (document.layers && document.layers[globalObject] != null)
document.layers[globalObject].visibility = 'hidden';
else if (document.all)
document.all[globalObject].style.visibility = 'hidden';
wasShown = 1;
}
-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.toolTip {
position: absolute;
visibility: hidden;
left: 155px;
top: 25px;
background-color: #CC9999;
border: 1px solid #CC6699;
width: 150px;
}
-->
</style>
</head>
<body>
<table width="100%" border="1" onMouseOver="show('toolTip')" onmouseout="hide('toolTip')">
<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
<tr>
<td>Cell Three</td>
<td>Cell Four</td>
</tr>
</table>
<div id="toolTip" class="toolTip">
<table border="2" cellpadding="2" cellspacing="0">
<tr>
<td>This is the tooltip text that needs to stay on for at least the full
5 seconds.</td>
</tr>
</table>
</div>
</body>
</html>
jinkas
10-06-2003, 02:37 PM
Nevermind, got it figured out. Who would have thought that it would be so easy? I puzzled over it for so long, and all I had to do was take out the onmouseout="hide('toolTip')" part...problem solved! Thanks for everything!
Gollum
10-07-2003, 02:16 AM
This may be a bit late, but there is a much simpler way to do what you want...

<html>
<body>
<table>
<tr>
<td onmouseout="this.title = '';" title="This is Cell One">Cell One</td>
<td onmouseout="this.title = '';" title="This is Cell Two">Cell Two</td>
</tr>
<tr>
<td onmouseout="this.title = '';" title="This is Cell Three">Cell Three</td>
<td onmouseout="this.title = '';" title="This is Cell Four">Cell Four</td>
</tr>
</table>
</body>
</html>


Using the little known TITLE attribute that all HTMLElements support which displays a tooltip for approximately five seconds (browser dependant). Then in the onmouseout, you remove the TITLE value and the tooltip will never show again.