CSS

Tooltips

12.09.07

Example

Example linkLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam et sapien. Vivamus auctor luctus augue. Ut commodo laoreet lectus. Pellentesque et erat. Quisque ut ligula. Fusce at ipsum. Praesent vitae augue. Phasellus feugiat. In a nibh non sapien placerat pellentesque. Nulla accumsan. Sed venenatis mattis magna. Proin id diam.

Code

/**************************************************************/
/* tooltips                                                   */
/**************************************************************/
.tooltip
{
    position:relative;
    z-index:24;
}

.tooltip span
{
	display: none;
	font-weight: bold;
}

/*background:; ie hack, something must be changed in a for ie to execute it*/
.tooltip:hover
{
	z-index:25;
}

.tooltip:hover span.tooltip
{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: black;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}

.tooltip:hover span.top
{
	display: block;
	padding: 30px 8px 0;
    background: url('bubble.gif') no-repeat top;
}

.tooltip:hover span.middle /* different middle bg for stretch */
{
	display: block;
	padding: 0 8px;
	background: url('bubble_filler.gif') repeat bottom;
}

.tooltip:hover span.bottom
{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url('bubble.gif') no-repeat bottom;
}

Quirks I've found with this technique are the balloon won't show if within an <a> element missing a href attribute.

<p><a href="#" class="tooltip">Example<span class="tooltip"><span class="top"></span><span class="middle">Example</span><span class="bottom"></span></span></a></p>

Credits

CSS Bubble Tooltips