Tooltips in 100% CSS

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 Grundgerüst automatisch erstellen lassen Der erste Wurf eines Templates ist recht nervig. Ich weiss nicht wie ihr vorgeht, aber ich beginne erst einmal damit die komplette Struktur in HTML au...
Individuelle Checkboxen ohne JavaScript Schuster bleib bei deinen Leisten ist nicht immer eine gute Idee! Vor allem dann, wenn man seine Stiefel anstatt gegen die Version aus Gummi auszutaus...
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...
html2canvas – Screenshots mit JavaScript Wenn man mal überlegt, womit sich man sich als Blogger so seine Zeit vertreibt, wird man auf eins sehr schnell kommen: Screenshots. Die kleinen Bieste...

Eine Antwort auf „Tooltips in 100% CSS“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.