W3C home > Mailing lists > Public > www-style@w3.org > April 2000

demo of the problem

From: Joe Hewitt <joe@joehewitt.com>
Date: Wed, 5 Apr 2000 15:59:59 -0400
To: <www-style@w3.org>
Message-ID: <000001bf9f39$864b0940$31cfb326@zenimax.com>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:04 GMT