CSS3 Tooltips

Follow me on Twitter | Visit my Website

Die Variante 1 liest via CSS ein HTML 5 DATA ATTRIBUT aus .. on hover wird es mit der BEFORE Pseudoklasse angezeigt. Leider können Webkit Browser keine Transitions auf Pseudoelemente .. insofern gibt hier keinen schicken Fading Effekt. Markup im Tooltip ist ebenfalls nicht möglich. Dafür ist es aus semantischer Sicht 100% okay.

Variante 2 ist etwas komplexer .. und semantisch zumindest fragwürdig .. der STRONG Tag hat ein SPAN Kindelement das initial ausgeblendet ist .. on hover wird es angezeigt .. Transitions sind hier möglich. Problem: der Tooltip soll am Element hängen das man hovert und relativ positioniert zu diesem angezeigt werden .. darum solch ein Konstrukt.

Variante 3 funktioniert im Grunde wie Variante 2 .. allerdings onclick .. ich verwende den Target Selector .. zum öffnen und natürlich auch wieder zum schließen. Drumrum braucht man allerdings noch einen Wrapper da der Inhalt des Tooltips KEIN Kindelement des öffnenden Elements sein kann .. sonst würde man den nicht mehr schließen können.

CSS direkt im Quelltext. Getestet im Firefox und in Webkit Browsern.

Tooltip Variante 1 mit einem Data Attribut für kurze Texte

Tooltip Variante 2 MARKUP mal anders

Tooltip Variante 2 MARKUP
Tooltip mit Markup aber sematisch nicht so schön
aber mit bild
mit Markup

Tooltip Variante 3 X MARKUP
Tooltip mit Markup und dem Target Selector
aber mit bild
mit Markup