HTML5: Schicke Tooltipps mit Tooltipster für jQuery

Tooltipps sind eine feine Sache. Schließlich ermöglichen sie es, kurze Infos platzsparend genau dort unterzubringen, wo sie wichtig sind. Tooltipster stellt ein jQuery-Plugin zur Verfügung, mit dem sich schnell und einfach sehr ansprechende und individuelle Tooltipps realisieren lassen. Diese sind zudem HTML5-konform und ausschließlich per CSS gestaltet, was eine Anpassung des Aussehens einfach macht.


Tooltipster

Tooltipps über TITLE-Attribut auszeichnen

Tooltipster besteht aus zwei Dateien, einer JavaScript-Datei mit dem jQuery-Plugin und einer CSS-Datei, über die das Layout der Tooltipps angepasst wird. Beide Dateien müssen zusammen mit jQuery im HTML-Head eingebunden werden. Anschließend wird das Plugin gestartet:

1
2
3
$(document).ready(function() {
  $(".tooltip").tooltipster();
});

Im Beispiel wird das Plugin auf alle Elemente mit der Klasse „tooltip“ angewendet. Die Inhalte der Tooltipps werden über das gängige TITLE-Attribut ausgezeichnet. Das Plugin wandelt die Inhalte dieses Attributes anschließend in schicke Tooltipps um, deren Aussehen über die CSS-Datei beliebig angepasst werden kann:

1
<a href="http://www.drweb.de/" title="Dr. Web Magazin" class="tooltip">drweb.de</a>

HTML im Tooltipp möglich

Wer mehr als reinen Text in einem Tooltipp unterbringen möchte, kann dies mit Tooltipster tun. Das Plugin erlaubt es, HTML-Elemente innerhalb des TITLE-Attributes zu platzieren. Diese werden per JavaScript entsprechend umgesetzt:

1
<a href="http://www.drweb.de/" title="<img src='drweb.png' width='50' height='50' / class="tooltip">Dr. Web Magazin">drweb.de</a>

Die Auszeichnung mag ein wenig befremdlich aussehen; aber sie funktioniert. Zu beachten ist hierbei lediglich, dass der HTML-Quelltext innerhalb des Tooltipps bei ausgeschaltetem JavaScript als reiner Text ausgegeben wird. Wer sich die Standarddarstellung des TITLE-Attributes als Fallback erhalten möchte, sollte auf HTML im Tooltipp verzichten.

Individuelle Themes und Einstellungen

Neben dem Standard-Theme sind weitere individuelle Themes per CSS möglich. Die Themes werden über den Plugin-Aufruf als Option übergeben:

1
2
3
$(".tooltip").tooltipster({
  tooltipTheme: ".mein-tooltip"
});


Tooltipp mit HTML-Elementen

Außerdem stehen weitere Optionen zur Verfügung, über die das Verhalten der Tooltipps gesteuert werden kann. So kann beispielsweise festgelegt werden, ob der Tooltipp an einer festen Position stehen oder ob er sich am Mauszeiger orientieren soll:

1
2
3
$(".tooltip").tooltipster({
  followMouse: true
});

Fazit: Tooltipster ist ein praktisches Plugin, um schicke Tooltipps ohne großen Aufwand realisieren zu können.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
ati
Gast
ati
3 Jahre 6 Monate her

Macht einen guten Eindruck. Danke!

Ludwig
Gast
Ludwig
3 Jahre 4 Monate her

Die Option followMouse: true ist leider nicht (mehr) vorhanden.

Peter
Gast
Peter
3 Jahre 9 Tage her

Also ich muss auch zugeben: Tooltipps sind eine feine Sache.
Danke für die Infos.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen