CSS Tooltip Rollover
Wednesday, April 30th, 2008Start with this
<a href="#">Title <span>Tooltip</span></a>
Anchor is given position:relative and span is placed absolute and styled separately. We initially hide the span element and show it only when user hovers the link (using a:hover span selector). Here's the css:
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;
}
Click here to see it in action —————- Listening to: Chevelle - Panic Prone via FoxyTunes