CSS3 Tooltips

die ohne JavaScript funktionieren .. ich habe mal 3 verschiedene Arten einen CSS3 Tooltip zu bauen in einem Beispiel zusammengefasst.

Ein HTML5 Data Attribut via :before oder :after Pseudoselector auszulesen ist sicher die sauberste Methode. Allerdings bekomme ich in den Inhalt des Tooltips auch kein Markup. Außerdem eignet es sich auch nicht für lange und umfangreiche Texte da hier ja die Lesbarkeit gewährleistet bleiben muss. (siehe Variante 1)

Eine weitere Methode wäre den Inhalt des Tooltips als Kindelement dem zu öffnenden Element zuzuordnen .. für CSS kein Problem .. allerdings steht dann der Inhalt des Tooltips für Screenreader, Spider und Menschen die ggf. custom CSS zum anzeigen der Seite benutzen direkt im Fließtext. (siehe Variante 2)

Variante 1 und 2 funktionieren per mousehover .. doof für Touch Interfaces und wenn man den Text vielleicht herauskopieren möchte. Variante 3 bedient sich darum beim :target selector .. man muss also explizit auf den Link zum öffnen klicken. Danach wird das versteckte Target Ziel eingeblendet … ein CLOSE Button ist dann natürlich auch notwendig. (siehe Variante 3)

Hier alle CSS3 Tooltips zum testen .. das CSS steht direkt im Quelltext.

Leave a Reply

Your email address will not be published. Required fields are marked *