perun.net – WordPress & Webwork



hint.css – gestylte Tooltips nur mit CSS

Von am 04. 02. 2013 um 18:59 – Aktualisiert am 05. 02. 2013 um 16:38

Die hint.css eine kleine Tooltip-Bibliothek mit der man gestylte Tooltips umsetzen kann, die lediglich CSS und ein bisschen HTML benötigen:

Gestyllte Tooltips nur mit CSS

Man muss lediglich die CSS-Datei einbinden, entweder als separate Datei oder n dem man den Code in die bereits bestehende CSS-Datei reinkopiert. Anschließend kann man mit so Konstrukten…

Ich bin ein <span class="hint  hint--bottom" data-hint="Hallo">Tooltip</span>. 

… verschiedenartige Tooltips erzeugen. Ich habe sowohl die Online-Demo, wie die lokale Variante getestet und es funktioniert mit den aktuellen Versionen von Firefox, Chrome und Opera und auch auf dem Internet Explorer 9.

Weitere Infos gibt es in der readme-Datei.

Via Twitter.

Diesen Artikel weiterempfehlen:

Hinweis:
Schulungsunterlagen für WordPress
Aktuell und praxiserprobt. Als E-Book für den Privatgebrauch oder als PDF-Volumenlizenz für den geschäftlichen Einsatz.

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
 
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 


2 Kommentare

  1. 1. – Birgit

    Kommentar vom 04.02.2013 um 19:03

    supergenial, vielen Dank für den Tipp!

  2. 2.Heiko

    Kommentar vom 05.02.2013 um 16:08

    Dabei sollte man jedoch beachten, dass die zunehmende Anzahl der Besucher mit Touch-Geräten, die Tooltips in der Regel nicht wahrnehmen werden. Also Vorsicht mit relevanten Informationen.

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.