CSS: tooltips

First of all, let’s create the CSS content:

CSS code

a{
	z-index:10;
	}
a:hover{
	position:relative;
	z-index:100;
	}
a span{
	display:none;
	}
a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
	}

And the Html:

Html code

<a href="#">Title <span>Tooltip</span></a>

Advertisement