<html>
<head>
<script type="text/javascript">
function mouseOver(){t=setTimeout("document.b2.src='desc3.gif'",500);}
function mouseOut(){clearTimeout(t);var u=setTimeout("document.b2.src='transparent.gif'",500);}</script>
</head>
<body>
<img border="0" src="transparent.gif" name="b2" style="z-index: 2; position: absolute; top: 400px; left: 231px;"></style>
<img src="arrow.gif" onmouseover="mouseOver()" onmouseout="mouseOut()" />
</body>
</html>
I haven't done it, but I would imagine to make the TT sticky, you'd just eliminate the onmouseout in the "arrow.gif" tag. You'll have to include a onClick function on the sticky TT image to make the entire image a close button, although you can create your image with a "close button" layered down as part of the image. I'm not sure if putting a anchor and an onClick function on the "transparent.gif" will carry that function over to the new image or not. The "transparent.gif" should be a 1px by 1px transparent image, so it doesn't interfere with the page. You can also include a fade in the mouseOver and mouseOut functions, but I've never done it, and I'd have to look it up. Can someone respond and throw that in?
Also, I made this by modifying an "image-switch" code and I put the tooltip in an absolute position which doesn't work well with different resolutions if you've got a fluid page. You'd have to work with offsets if you have a fluid format. I believe that you can also do the whole thing by eliminating any "transparent.gif" and changing the display: or visibility: style via onmouseover and onmouseout. That way you could easily put your onClick "close" function on the "desc3.gif" image and thereby close the TT by changing the style back to display: none; or visibility: hidden;.