Tooltips in 100% CSS

Screenshot der Hint.css Webseite

Tooltips sind inzwischen in jeder Web-Applikation zu finden, einfach um dem Benutzer mehr Informationen zu geben oder besser zu führen. Bei ganz windigen Designs braucht man die Tooltips des öfteren auch um dem Nutzer zu erklären, was sich wohl gerade hinter dem windigen Icon verbirgt. In der Regel erfolgt die Implementation mit JavaScript (jQuery-Plugin) und sie bringt eine ganze Menge an unnützem Zeug mit (JavaScript selbst, CSS, Hintergrundgrafiken, etc.)

Screenshot der Hint.css Webseite

Inzwischen lassen sich Tooltips allerdings auch mit reinem CSS implementieren, wobei die CSS-Bibliothek Hint.css hilft – schließlich braucht man das Rad ja nicht andauernd neu zu erfinden. Spannend ist natürlich, dass ich auf die Tooltips nun auch Animationen anwenden könnte, oder sie einfach mal um 90 Grad rotiere. Das Anpassen des Skripts ist recht einfach und es kommt mit einer ganzen Anzahl von Möglichkeiten daher, so dass es eigentlich Out of the Box benutzt werden kann.

Ähnliche Beiträge

Wieso man Javascript nicht im Head lädt (und im Fo... Ich kann mich noch erinnern als Anfang der 90er Javascript noch ein außerirdisches Mysterium war, und zwei Zeilen Inline-Javascript das höchste der Ge...
Der ultimative CSS gradient Generator CSS Gradients sind nicht nur ein neuer Hype, sondern eine äußerst sinnvolle Sache, da sie helfen, statische Grafiken loszuwerden und schnell austausch...
Sprite Cow – CSS Sprite nach CSS CSS Sprites sind höchst nützliche kleine Dinger, um Ladezeiten zu verkürzen, vor allem wenn man ein passendes Caching / Expire im Apache damit verbind...
CSS Reset vs. Normalize Die Tage ging ein Aufschrei durch Twitter: die HTML5-Boilerplate hat den CSS-Reset raus geworfen, und durch ein Normalize ersetzt. Ich war relativ ers...

Ein Kommentar

Schreibe einen Kommentar