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)
<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
$(".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.
Ähnliche Artikel
Suchen
Hinterlasse einen Kommentar