CSS Hyperlink Tooltips
Ever wanted nicely styled CSS tooltips?
Here's a quick explanation:
<a href="#">Link text<span>Your tooltip</span></a>
Use that HTML. Then add the following to your stylesheet:
a { position: relative; outline: none; } a span { display: none; } a:hover span { display: block; font-size: 8pt; position: absolute; top:-25px; left: -45px; border:1px solid #383a47; background-color:#5cbbe3; color: #383a47; text-align: center; padding: 1px 5px; width: 130px; }
This code hides the span tag when you're not hovering over it. (a span { display: none; }) and positions it nicely when you DO hover over it.
Read on for an example (just a single hyperlink, but it's not valid xhtml so I put it on a different page)
July 19th, 2008 at 18:03 #Hayes Potter
Hmm, your code for a span seem to me like it would be wrong but it obviously works. I would think you would put “position: relative;” not absolute because then it would show up at the top of the page. O wait just noticed that your a position was relative, haha never mind.