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

Landkarten als Font – Map Glyphs Wer den Blog schon länger verfolgt weiß durchaus, das ich mich sehr viel mit der Darstellung von Objekten auf Landkarten und Umkreissuchen beschäftige...
jFontSize – dynamische Font-Size mittels jQu... Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Se...
Wasserzeichen mit JavaScript und dem Canvas-Elemen... Angenommen man besitzt einen Shop, angenommen man verkauft tausende Artikel die vom gleichen Großhändler kommen. Der Großhändler besitzt natürlich kei...
Backgrounds für Grid Based Layouts Okay, ich gebe zu, der Titel ist maximal mystisch, passt aber ;) Ich glaube zum Grid Based Design brauche ich nichts mehr zu sagen, und es gibt ja auc...

Eine Antwort auf „Tooltips in 100% CSS“

Schreibe einen Kommentar

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