Sexy Tooltip Using CSS3 (No Images)

http://www.nitinh.com/2010/03/sexy-tooltip-using-css3/

by brasofilo

HTML

<a class="tooltip" tip="This is first tooltip" href="#">Link</a>

CSS

a.tooltip:after{
	font:12px/1.4 Arial,Georgia,sans-serif;
	content: attr(tip);
	display:none;
	position:absolute;
	padding:5px 10px;
	top:0px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698;
	left:-20px;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;

	background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(top, #075698, #2e88c4);
	background:-o-linear-gradient(top, #075698, #2e88c4);
	background:linear-gradient(top, #075698, #2e88c4);

	-moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */
	box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */
	filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000')"; /* IE8 */
}

/* creates triangle */
a.tooltip:before{
	z-index:13;
	position:absolute;
	content:"\00a0";
	display:none;
	width:0;
	height:0;
	border-style:solid;

	top:-3px;
	left:0px;
	border-width:15px 7px 15px 7px;
	border-color:transparent transparent #075698;
}

a.tooltip:hover::before{
	display:block;
}

a.tooltip:hover{
	z-index:10;
	position:relative;
}

a.tooltip:hover::after{
	width:200px;
	display:block;
	margin:25px 0 0 10px;
}