Chukki.de - Der Tumblr-Blog über Webdesign, Wordpress, Social Media, Cloud und Webentwicklung

jQuery Tools – Teil 2: Tooltips

Geschrieben von: Andre

Kategorie: Webentwicklung

Kommentare: 2

Tooltips haben die schöne Funktion Zusatzinformationen zu Links, Bildern und ähnlichem zu zeigen, wenn man mit der Maus darüber fährt. Diese Tooltips haben jedoch leider die negative Eigenschaft das sie nicht mit CSS anpassbar sind – das Betriebssystem bzw. der Browser gibt vor, wie sie auszusehen haben.

Durch diese Einschränkung führen die Tooltips ein sehr unterbewertetes Leben im Webdesign – lediglich zu Suchmaschinenoptimierungszwecken oder von Online-Shops, welche oft ein Tooltip hinter einem der etlichen unverständlichen Icons verstecken wird diese Funktion genutzt – der Mehrwert fehlt oft auch einfach weil sie nicht durchgehend genutzt und mit sinnvollen Infos gefüllt werden. Es können weder Bilder eingebunden werden, noch eine Formatierung der Schrift vorgenommen werden, was sie zu einem sehr unschönen Werkzeug verkommen lassen.

Beispiele

Anwendungszwecke für die stylebaren Tooltips gibt es etliche. Ein Menü mit vielen Produktnamen kann z.B. durch ein Tooltip, welches ein Foto vom Produkt zeigt, aufgewertet werden. Auf Chukki.de werden die Tweets von Twitter über ein Tooltip eingebunden. Wenn man den Vogel in der oberen rechten Ecke mit der Maus berührt, wird der letzte Tweet in einer Sprechblase optisch schön dargestellt. So kann die Website durch ein echtes Highlight im Detail aufgewertet werden.

Hier 3 Beispiele für den Einsatz von Tooltips:

tinto_tool
Tintometer.de – Tooltip mit Foto und zusätzlichen Infos zum Produkt als Vorschau

coda_tool
Coda – Tooltip mit Informationen zu dem Download des Apps

chukki_tool
Chukki.de – Wir nutzen Tooltips um den letzten Tweet bei Twitter anzuzeigen, sobald man mit der Maus den Vogel berührt

Der Ein­satz von jQue­ry Tools

Die Grundlagen rund um die jQuery Tools habe ich im ersten Teil unserer Reihe bereits angesprochen und beschrieben. In diesem Teile gehe ich deshalb nur noch auf die Tooltip Funktion ein.

Ähnlich wie bei den Tabs, gibt es auch bei den Tooltips 2 Container die benötigt werden. Ein Container – z.B. ein Link, ein Bild oder auch einfach nur ein festgelegter Bereich welcher als “Trigger”, also als Auslöser fungiert und ein Container der den anzuzeigenden Inhalt beinhaltet. 

<a href='#' id='trigger'>Trigger</a>
<div id='tooltip'>Der Trigger hat mich ausgelöst. Ich bin ein verstecktes Element und werde nur angezeigt wenn die Maus den Trigger berührt.</div>

Mit CSS wird der DIV Container anschließend versteckt und optisch angepasst. Mit display:none gehen wir sicher das der Container vorher ausgeblendet wird und erst angezeigt wird, wenn er benötigt wird. Alle anderen Informationen können mit ganz normalem CSS formatiert werden.

#tooltip{
    display:none;
    background:transparent url(images/bg.png) no-repeat top left;
    padding:5px;
}

Der wichtigste Teil, das JavaScript ist mit einem Aufruf der Tooltip Funktion getan:

$("#trigger").tooltip();

Der Selektor “trigger”, welchen wir im HTML Part dem Link zugewiesen haben, wird für das Tooltip als “trigger” genutzt. Für den Inhalt wird automatisch der Container “tooltip” genutzt, welcher unterhalb des Selektors liegt. Durch weitere Parameter kann das Tooltip aber noch verändert werdenm so kann die Position angegeben werden und mit welchen Effekt es erscheinen soll usw.

$("#trigger").tooltip({effect:fade; position:left;});

Mit diesen beiden zusätzlichen Parametern teilen wir dem Tooltip mit, das es mit einem “Fade” Effekt links neben dem Link eingeblendet werden soll, ähnlich unserem zwitschernden Vogel in der oberen rechten Ecke.

Das war es soweit eigentlich schon. Wieder wurde mit wenig Arbeit ein toller Effekt erzeugt, welcher das Surf-Erlebnis für den User auf der eigenen Website deutlich verbessert. Weitere Infos und Beispiele auf der Seite der jQuery Tools

Andere interessante Posts...

2 Kommentare zu "jQuery Tools – Teil 2: Tooltips"

Sebastian schrieb am 12. August um 12:54 Uhr:

hi!

ich habe folgenden Code..welcher aber das Tooltip nicht zum laufen bringt.

Hast du vllt ne Idee woran es liegen könnte?

test

#tooltip{
display:none;
background-color: #000000;
padding:5px;
}

$(“#test”).tooltip();

Der Trigger hat mich ausgelöst. Ich bin ein verstecktes Element und werde nur angezeigt wenn die Maus den Trigger berührt.

Trigger

Danke..

André schrieb am 13. August um 08:47 Uhr:

Hast du eine Beispielseite wo du den Code eingebaut hast?
Und welche Version der jQuery Tools hast du in Benutzung?

Gruß André

Kommentar schreiben