CSS Tooltips

Description:
Use this example CSS tooltip code to create customized pseudo tooltips for your own webpages without javascript.

Language: CSS

Example

HTML

<a class="css_tooltip" href="#">
 This is the link text
 <span>This is the tooltip text</span>
</a>

Style Sheet

a.css_tooltip{
position:relative;
z-index:24;
}

a.css_tooltip span{
display:none
}

a.css_tooltip:hover{

z-index:25;
/* IE requires a background color for some reason */
background-color:#ffffff;
}

a.css_tooltip:hover span{
position:absolute;
display:block;

/* Optional Styles */
top:1em;
left:2em;
padding:5px;
font-weight:normal;
color:#000000;
text-decoration:none;
border-style:solid;
border-width:1px;
background-color:#fafafa;
}