CSS only tooltip

Tooltip. Know what that is ? That is the "popup" sort of thing that turns up when you're hovering a link. Like if you hover this link that do not lead anywhere. The basics of the following comes from
Eric MeyerOne heck of a guy knowing alot about CSS. Ok. That's established.

So, CSS only tooltip no JS or any such crap...

The idea here is to add position:relative to the link, in order to allow the span element inside to position absolute with regards to the link.

The CSS:

a.tooltip{position:relative;z-index:24; color:#600;text-decoration:none}
a.tooltip:hover{z-index:25; background-color:#ff0}
a.tooltipspan{display: none}
a.tooltip:hover span{display:block;position:absolute;top:2em; left:2em; width:15em;border:1px solid #000;background-color:#600; color:#f8f8f8;text-align: center;padding:2px;}

Now with this CSS and a little hardcoding in the "a href" link you will get this: LINKThis is the tooltip created by the CSS above. The actual change of an ordinary link that makes this happen is two things, first you need to add a class to the link, and then you need to manually add the actual tooltip inside a span tag. The class that should be inside the a href tag is:

class="tooltip"

And the tooltip itself appears when you add a span right after the linkname, like this:

LINKNAME <span>This is the tooltip created by the CSS above </span>

That's it. A bit neater than the ordinary tooltip don't ya think ;)...

20.12.2006. 16:58