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.


<style type="text/css">


	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;


<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';




<div id="object" onmouseover="showToolTip('box', event)"
onmouseout="hideToolTip('box')">Mouseover me for spiritual

<div id="box">How lovely.</div>

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