:after and :beforeStop waffling and gimme something I can use right now? Okay, see section 3!
These tooltip rollovers use a custom HTML5 a tag data- attribute (data-tooltip) to populate a tooltip displaying text contained in the attribute. The arrow triangle is formed by two generated overlapping elements with only the top border visible (r-l are transparent, bottom is 0px). All tooltip text is an extension of the link and therefore clickable.
View source to get code - it's as clean as possible, and each tooltip has a separate block of css styles—use the Arrow tooltip (final) CSS for the finished styles. Don't like the colour? You know what to do. Original inspiration: Nicolas Gallagher's Pure CSS speech bubbles, and a desire to emulate Addy Osmani's JQuery tooltip in pure CSS. All thanks to this post on Talentopoly (join to view, free).
:before (no arrow)This link with a CSS-styled rollover tooltip uses a 'data-' attribute for the tooltip content. You can also use :after to generate the tooltip. A box-shadow makes it appear to float above the content.
:before and :after (a tag inside span)Since the link's :before property is already used for the tooltip text, we need an extra element to provide further generated content. This CSS-styled rollover tooltip link adds an arrow made from overlapping :before and :after properties on a span that wraps the link. The triangle has no width or height and is constructed from borders only, which means we can't use a box-shadow with positive values, as it appears outside the transparent rectangle of the l-r borders and not around the 'arrow'.
:before and :after (span inside a tag)This translucent CSS-styled rollover tooltip uses a span inside the a tag. The shadow is reinstated but with negative top/left values to avoid the arrow. For a final touch alpha transparency (rgba) is applied to the tooltip elements, with trial-and-error tweaks to blend the arrow's colour into the lower gradient and reduce the visibility of the (darker) border colour of the outer triangle beneath the inner.
You can add it to any link by applying the tooltip class and wrapping the link text in a span.
The tooltip inherits the span's font-weight by default.
And before you ask: no, those CSS3 (in this case fade-in-nicely) transitions on generated elements aren't supported widely enough yet (FF only but even there, I couldn't get it to work).