Mit Hint.css toll gestylte CSS-Tooltips erstellen

Wie Sie Tooltips nur mit CSS und HTML erstellen können

Hint.css - A tooltip library in CSS

Tooltips finden man heute auf vielen Webseiten. Dies sind sogenannte »Quickinfos« oder »Kurzinfos«, welche dem Benutzer mehr Infos geben sollen. Sie werden zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder z.B. Bildern in Computerprogrammen, verwendet und erscheinen, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt.

Meine Demo-Datei ansehen: 11 CSS-Tooltips ansehen
Meine Demo-Datei downloaden: Zip-Datei (4 KB) herunterladen

Erstellung von CSS-Tooltips

Normalerweise erfolgt der Einsatz von Tooltips mit JavaScript (jQuery-Plugin). Der Nachteil bei dieser Art von Infoboxen ist, dass sie eine große Menge von Dateien (JavaScript selbst, CSS, Hintergrundbilder usw.) mit sich bringen und dadurch die Größe einer Webseite unnötig aufblähen.

Hint.css - 11 coole Tooltips

Mit der CSS-Bibliothek von Hint.css können Sie Tooltips allerdings auch mit reinem CSS in Ihre Webprojekte einbauen. Mit CSS3 gibt es sogar die Möglichkeit, diese mit Animationen zu erstellen oder sie einfach mal um 90 Grad rotieren zu lassen.

Das Script von Hint.css kommt mit einer großen Anzahl von Möglichkeiten (rechts, oben, unten, links, Fehler, Warnung, Info, Erfolg, abgerundet usw.) daher und lässt sich ganz einfach an eigene Projekte anpassen.

Download von Hint.css

Sie können das Script zu Hint.css auf der Webseite von Github.com kostenlos downloaden und ohne Einschränkungen sowohl privat als auch geschäftlich für Ihre Webprojekte nutzen.

Einbau des Scripts in eine Webseite

CSS-Bibliothek in der HTML-Datei einbinden

<link rel="stylesheet" href="hint.css"> oder
<link href="hint.css" rel="stylesheet" type="text/css" media="screen" />

Tooltip in HTML-Datei einbinden

Jedem Element auf der Webseite, welches einen Tooltip erhalten soll, muss eine CSS-Klasse als Position zugeordnet werden:

hint--top, hint--bottom, hint--left, hint—right bzw. 
hint--error, hint--info, hint--warning, 
hint--success, hint—rounded und hint—bounce

Muster-Beispiel von meiner Demo-Datei:

Hier befinde ich mich ganz rechts!

Die CSS-Klasse ist hier hint—right, so dass der Tooltip rechts neben dem Link erscheint. Der Tooltip-Text wird dann in der CSS-Klasse data-hint="Bist du dir da ganz sicher?" eingetragen.

Meine Demo-Datei ansehen und herunterladen

Ich habe das vorliegende Beispiel von Kushagra Ghur ein wenig bearbeitet, indem ich in der Demo-Datei einen deutschen Text mit ebensolchen Tooltips eingebaut habe. Sie können meine Bearbeitung ansehen und die entsprechende Datei im Zip-Format kostenlos downloaden und für Ihre Projekte verwenden.

Demo-Datei ansehen: 11 CSS-Tooltips ansehen
Demo-Datei downloaden: Zip-Datei (4 KB) herunterladen
Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

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