- From: Joe Hewitt <joe@joehewitt.com>
- Date: Wed, 5 Apr 2000 15:59:59 -0400
- To: <www-style@w3.org>
Perhaps a visual demonstration would help. Plug this html into Mozilla and see why this fairly common tool-tip behavior is impossible to achieve using the CSS2 box model. Plug it into IE5 to see the correct, although non-standard behavior. <html> <head> <title>Test</title> <style type="text/css"> #box position: absolute; display: none; white-space: nowrap; background-color: #fafad2; left: 40px; top: 80px; border: solid 1px #ff0000; padding: 1px; z-index: 100; } #object { background-color: #87ceeb; width: 200px; height: 200px; } </style> <script language="Javascript1.3"> function showToolTip(aID, aEvent) { var box = document.getElementById(aID); box.style.display = 'inline'; box.style.left = aEvent.clientX + "px"; box.style.top = aEvent.clientY + "px"; } function hideToolTip(aID) { var box = document.getElementById(aID); box.style.display = 'none'; } </script> </head> <body> <div id="object" onmouseover="showToolTip('box', event)" onmouseout="hideToolTip('box')">Mouseover me for spiritual enlightenment.</div> <div id="box">How lovely.</div> </body> </html>
Received on Wednesday, 5 April 2000 15:55:33 UTC