Demo: tooltip

Example 01: CSS styled tooltip. You can download the images for the background here and here.

A link can say a lot …

<!-- EXAMPLE 01 -->

<h3>Example 01: CSS styled tooltip. You can download the images for the background <a href="pages/tooltip-demo/tooltip-background-top.png">here</a> and <a href="pages/tooltip-demo/tooltip-background-bottom.png">here</a>.</h3>

<p id="example-link"><a title="… more with a tooltip.">A link can say a lot …</a></p>

/* EXAMPLE 01 */

.example-tooltip {
	width: 200px;
}
 
.example-tooltip .top {
	height: 10px;
	overflow: hidden;
	background: transparent url(tooltip-background-top.png) no-repeat top left;
}
 
.example-tooltip .content {
	padding: 0 10px;
	background-color: black;
	color: #999999;
}
 
.example-tooltip .bottom {
	height: 10px;
	overflow: hidden;
	background: transparent url(tooltip-background-bottom.png) no-repeat top left;
}

/* EXAMPLE 01 */

#example-link a {
	tooltip: '<div class="top"></div><div class="content">%title</div><div class="bottom"></div>';
	tooltip-class: example-tooltip;
	tooltip-opacity: 0.75;
}