Kategorien
Design HTML/CSS

HINT.css – Tooltipps ganz ohne JavaScript, nur mit reinem CSS3 und HTML5

Tooltipps in HTML-Seiten entstehen grundsätzlich automatisch, sofern man seinen Elementen das Title-Attribut mitgibt. Das wird nicht nur zur Generierung von Tooltipps, sondern auch als Text für Lesesysteme und zu anderen Zwecken verwendet. Die Interpretation ist vom verwendeten Browser abhängig. Wer mehr Kontrolle möchte, setzt bereits seit Jahren auf Lösungen mit JavaScript. Kashagra Gour legt nun mit Hint.css eine Alternative vor, die komplett auf CSS und HTML basiert und dabei nicht minder schick aussieht.

hint.css

Hint.css – Data-Attribute, CSS3 Transitions, Pseudo-Elemente und die Content-Eigenschaft

Hint.css ermöglicht einfache Tooltipps an Elementen, an denen das einen Sinn ergibt, allen voran also Texten, Links und Bildern. Um den Tooltipp anzeigen zu können, werden die Elemente mit zwei aufeinanderfolgenden Klassen versehen. Die erste lautet stets hint, während die zweite die Position oder die Farbe des Tipps definiert. Will man Position und Farbe festsetzen, fügt man eben drei Klassen hinzu. Das sieht dann beispielsweise so aus:

    Oh man! You are gonna self-destruct in 5 sec.

Im Bild:

Hint.css | Ein Beispiel

Hier wird mit hint zunächst festgelegt, dass Hint.css das Element betreffen soll. Die Klasse hint--top positioniert den Tooltipp oberhalb des Span und hint--error definiert das rote Erscheinungsbild. Im korrespondierenden Attribut data-hint hinterlegt man den anzuzeigenden Text.

HTML5 Data-Attribute sind eine Möglichkeit, beliebige Daten innerhalb eines validen Quellcodes unterzubringen. Unter Verwendung von Data-Attributen ausgezeichnete Daten werden dem Betrachter nicht angezeigt und wirken sich nicht auf das Layout aus. Gleichwohl sind sie in der Seite enthalten und können einfach, wie etwa hier im Falle von Hint.css, weiterverarbeitet werden.

In seiner jetzigen Form verfügt Hint.css über Definitionen für hint--top, hint--bottom, hint--left und hint--right, die der Positionierung des Tooltipps dienen. Darüberhinaus stehen Farbdefinitionen für gängige Statusmeldungen bereit, als da wären hint--error, hint--info, hint--warning und hint--success. Wer möchte, dass der Tooltipp stets sichtbar bleibt und nicht erst via Hover getriggert werden muss, der verwendet (zusätzlich) hint--always.

Da Hint.css reines CSS darstellt, kann der Funktionsumfang natürlich von entsprechend CSS-Kundigen einfach erweitert werden. Das betrifft in allererster Linie die Farb- und Schriftpräsentation. Mit etwas Fantasie lässt sich Hint.css noch deutlich weiter aufbohren, zumal es in Sass entwickelt wurde und die Sass-Quellen ebenfalls frei verfügbar sind. Das Stylesheet steht auf Github unter MIT-Lizenz zur Download bereit und kann sowohl für private, wie auch kommerzielle Projekte eingesetzt werden.

Schon der Erkenntnisgewinn, dem man sich nicht entziehen kann, wenn man sich mit dem Stylesheet beschäftigt, lohnt den Aufwand. Insofern ist Hint.css rundheraus empfehlenswert. Erwähnenswert ist eventuell noch, dass CSS Transitions auf Pseudo-Elemente nur im Firefox funktionieren, was jedoch insofern unschädlich ist, als andere Browser die Tooltipps schlicht ohne Transitions rendern, was nicht minder ansehnlich ist.

Links zum Beitrag: