www.tuljo.com

Hover tooltip css

This "hover tooltip css" can be used to add a hover flyout / callout to any element. No jQuery, no JavaScript.

Sample

An ordinary link for comparison.

Markup

<div class="fly">
	ELEMENT<br />
	<span class="fly-out">TOOLTIP</span>
</div>

CSS

body{/*this thing teaches to IE6 the hovering trick*/
	behavior:url(ie-hover.htc);
}
.fly{
	cursor:help;
}
.fly .fly-out{
	display:none;
	cursor:default;
}
.fly:hover .fly-out{
	display:block;
}
.fly .fly-out{
	background:#ffffe1;
	border:1px solid #000;
	font-family:arial;
	font-size:11px;
	line-height:1.3em;
	padding:0 0.3em;
	position:absolute;
	width:auto;
}

On one occasion, FireFox required duplicatively an empty selector .fly .fly-out{}; above the regular .fly .fly-out{display:none;}

2008

Web Development - XHTML CSS JavaScript jQuery.