- 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