Passwort vergessen?

Benutzername vergessen?

Alles rund um IT, Web und Entwicklung.
Von Nutzern für Nutzer.

JQuery Tooltips mit Tipsy



Tooltips findet man heutzutage auf jeder modernen Webseite. Tooltips sind kleine Kästchen, welche beim Hovern über einen Link angezeigt werden und nähere Informationen zu diesem liefern.



Hovert man beispielsweise bei Facbook über die Freunde, welche online sind, oder bei Google+ zwischen den Menüpunkten, so werden diese angezeigt.


Vorbereitungen


Zunächst einmal muss JQuery heruntergeladen werden. Diese Datei muss anschließend auf den Webserver kopiert werden.

Als nächstes muss noch das Tooltip Plugin Tipsy heruntergeladen werden. Dieses muss jetzt noch entpackt werden. In dem neuen Verzeichnis befindet sich ein Ordner src. Dessen Inhalt kopieren sie in den gleichen Ordner wie bereits JQuery.


Tooltips einbinden


Im <head> Bereich Ihrer HTML-Datei fügen Sie nun folgende Zeile an:

<link href="stylesheets/jquery.tipsy.js" rel="stylesheet" type="text/css"></link>


Hiermit wird das Stylesheet von Tipsy eingebunden. Sollten Sie das Design anpassen wollen, so ist dies die zentrale Datei.

Direkt nach dem <head> Abschnitt und vor <body> muss folgendes eingefügt werden:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tipsy.js" type="text/javascript"></script>
 
<script type="text/javascript">
   $(document).ready(function(){
      $(function(){
         $(".tooltip_nw").tipsy({gravity: 'nw'});
         $(".tooltip_n").tipsy({gravity: 'n'});
         $(".tooltip_ne").tipsy({gravity: 'ne'});
         $(".tooltip_w").tipsy({gravity: 'w'});
         $(".tooltip_e").tipsy({gravity: 'e'});
         $(".tooltip_sw").tipsy({gravity: 'sw'});
         $(".tooltip_s").tipsy({gravity: 's'});
         $(".tooltip_se").tipsy({gravity: 'se'});
         $(".tooltip_auto").tipsy({gravity: $.fn.tipsy.autoNS})
      });
   });
</script>


Damit muss man einem Link nur das title Attribut zusammen mit einer der hier definierten Klasse übergeben.

Die Endung der Klasse beschreibt dann die Position des Pfeiles am Tooltip (z.B. nw = North West = Nord West = Oben Links)

Ein Link muss dann wie folgt angegeben werden:

<a class="tooltip_n" href="https://www.foxplex.com/" title="Link zu FoxPlex">Link</a>


Beim hovern über diesen erscheint dann ein Tooltip mit dem Pfeil in der Mitte oben und dem Inhalt "Link zu FoxPlex".

Mit der letzten Klasse tooltip_auto setzt Tipsy die Position automatisch.


Quelle des Textes ändern


Dabei muss man den Text für den Tooltip nicht zwangsläufig aus dem title Attribut ziehen.

Dazu erweitern wir hier die tooltip_nw Funktion:

$(".tooltip_nw").tipsy({gravity: 'nw', title: 'id'});


Damit definiert man, dass der Inhalt des Tooltips aus der id genommen werden soll und nicht aus dem title Attribut.


Effekte


Neben den Grundfunktionen bietet Tipsy auch noch einige Effekte.

Transparenz


Tipsy bietet unter anderem auch die Möglichkeit die Transparenz des Tooltips festzulegen. Hierzu muss die Klasse um das opacity Attribut erweitert werden:

$(".tooltip_nw").tipsy({gravity: 'nw', opacity: 0.5});


Einblenden


Um Tooltips langsam einzublenden muss die Klasse wie folgt erweitert werden:

$(".tooltip_nw").tipsy({gravity: 'nw', fade: true});


Verzögerungen


Zusätzlich kann man eine Verzögerung beim Ein- und Ausblenden angeben.

$(".tooltip_nw").tipsy({gravity: 'nw', delayIn: 500, delayOut: 1000});


Damit erscheint der Tooltip bei hovern erst nach 500 Millisekunden und nach Verlassen des Links mit dem Mauszeiger 1000 Millisekunden.


Weitere Möglichkeiten


Für zusätzliche Informationen empfiehlt sich die offizielle Dokumentation von Tipsy.


Fazit


Dank JQuery und dem Plugin Tipsy ist es sehr einfach möglich Tooltips in der eigenen Webseite einzubauen. Daneben bietet Tipsy auch noch sehr viele Optionen um die Tooltips an die eigenen Bedürfnisse anzupassen.

Michael Kostka

Fachinformatiker / Systemintegration
Ich schreibe hier regelmäßig zu den Themen Android, Web, Linux und Hardware.

Raspberry Pi Starter Kit
DataCloud

Hinterlasse einen Kommentar

Ich habe die Datenschutzerklärung zur Kenntnis genommen und stimme einer elektronischen Speicherung und Verarbeitung meiner eingegebenen Daten zur Beantwortung der Anfrage zu.