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

Enquire.js – Media Query Callbacks in JavaScript Media-Queries sind eine richtig schicke Angelegenheit, ohne die ein Responsive Design nicht möglich wäre. Ganz einfach ausgedrückt läuft die Sache so:...
JavaScript Animationen mit $fx() Zur Zeit zeichnet sich ein neuer Trend ab: Micro-Frameworks in Vanilla JavaScript. Die Entwicklung ist auch irgendwo logisch, denn man muss nicht imme...
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...
ProCSSor – Der CSS Prettifier Sagen wir mal so: Es existieren für verschiedene Sprachen durchaus Standards, wie Quelltext auszusehen hat, aber keiner hält sich dran. Für das Zend F...

Eine Antwort auf „Tooltips in 100% CSS“

Schreibe einen Kommentar

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