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

CSS Grids lernen mit Grid Garden Es ist ja noch gar nicht so lange her das ich über Flexbox Froggy berichtet habe. Mit dem Spiel kann man einfach und schnell den Umgang mit Flexboxen ...
CSS Refresh ohne Reload, dafür mit JavaScript Seien wir doch mal ehrlich, was ist die am meisten genutzte Taste auf eurer Tastatur? Richtig! F5 - Reload! ;) Das nervige Reloaden einer Seite kann d...
HTML Table CSS Style Generator Nachdem ja nun der Bann von HTML Tables scheinbar aufgehoben worden ist, darf man es ja wagen diese wieder zu verwenden. Das macht auch Sinn, weil tab...
Dynamische Favicons mit Funktion Die Idee ist ebenso genial wie einfach: Wenn sich ein Benutzer erst einmal an einem System angemeldet hat, besteht eine Session. Besteht eine Session ...

Ein Kommentar

Schreibe einen Kommentar