HTML/CSS

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

7. Februar 2013
von

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:

    <span class="hint  hint--top  hint--error" data-hint="This is an error tooltip">Oh man! You are gonna self-destruct in 5 sec.</span>

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:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , ,

6 Kommentare zu „HINT.css – Tooltipps ganz ohne JavaScript, nur mit reinem CSS3 und HTML5
  1. micha am 7. Februar 2013 um 13:19

    super, und für die browser die kein html5/css3 können, brauchen wir dann wieder javascript.. *omg

    • Dieter Petereit am 7. Februar 2013 um 13:56

      Oder schlicht das title-Tag…

      • Thomas am 9. Februar 2013 um 14:14

        Naja das Problem ist, dass beim IE8 die Tooltips immer angezeigt werden. Somit also nicht soooo toll das ganze.

      • Dieter Petereit am 9. Februar 2013 um 14:23

        Verstehe ich nicht, den Einwand. Ab IE8 werden Tooltipps über das Title-Attribut getriggert, also standard-konform. Davor nutzte MS das Alt-Attribut, was natürlich völliger Humbug war.

  2. Michael Hokamp am 19. Februar 2013 um 11:13

    Dieter,
    ich habe jetzt einige Zeit mit der hint.css gespielt, aber ich glaube, mir erschliesst sich hier einiges (noch) nicht?

    Der tooltip funktioniert auf dem data-* attribut und soll wohl auch das title-Attribut ersetzen? Füge ich den Beispiel-Links noch ein title Attribut hinzu, habe ich ungewünschte Nebeneffekte.

    Meiner Meinung nach darf ein benutzerdefiniertes Attribut nicht als Ersatz für vorhandene Attribute verwendet werden! Als zusätzliches Attribut macht es aber hier auch kaum Sinn und bläht den Quelltext auf?

    Warum nicht hier das Titel-Attribut nutzen, (was ja wie hier in den Beispielen bei einem Link, auch immer ganz nett wäre,) … es auslesen:

    [title]:hover::after{
    content: attr(title);
    ..
    ..
    }

    (bei allen elementen mit dem Attribut “title” bei mausover den Inhalt des Attributs darstellen)

    und dann ::after {} schick formatieren …

    Wo liege ich falsch?

    Gruss
    Michael

  3. […] HINT.css – Tooltipps ganz ohne JavaScript, nur mit reinem CSS3 und HTML5 […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!