HTML5/CSS3 tooltips. Any visible element with a data-tooltip attribute will have the value of that attribute displayed in a tooltip on hover, using only CSS.

tooltips.css

*[data-tooltip]::before
{
	box-shadow: .3em .3em .3em rgba(0, 0, 0, 0.4);
	max-width: 30em;
	font-size: 80%;
	font-weight: normal;
	background: #ff9;
	color:#000;
	border: 1pt solid #000;
	padding: 0.5em;
	margin: -2em 0 0 2em;
	text-align: left;

	height: auto;
	display: block;
	position: absolute;
	z-index: 9999;
	opacity: 0;
	top: -9999px;

	-moz-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	-webkit-transition: opacity 0.4s ease-out;
	transition:opacity 0.4s ease-out;

	content: attr(data-tooltip);
}

*[data-tooltip]:hover::before
{
	opacity: 1;
	top: auto;
}