jQuery ToolTip Plugin mit Fokussteuerung

By | 13. September 2011

In letzter Zeit setze ich bei meinen Projekten wieder verstärkt auf die Verwendung von jQuery. Dabei habe ich relativ hübsche Sachen gestalten können, welche ich euch nicht vorenthalten möchte. Heute geht es um ein kleines süßes jQuery ToolTip Plugin.

Demonstration

Link zur Demo des jQuery ToolTip

Vorschau des jQuery ToolTip

Es ist hier im Artikel extrem basic gehalten und kann aber nach Wünschen relativ einfach umgestaltet werden. Das Resultat soll folgendermaßen aussehen:

jQuery ToolTip Plugin

Die HTML-Umsetzung

Um das ganze Problem relativ einfach zu halten, bedarf es nicht viel Quältext. Wir brauchen ein wenig Markup (HTML), etwas Schönheitskosmetik (CSS) und ein paar Werkzeuge (jQuery). Wir jetzt eine CSS-Datei oder das jQuery Framework eingebunden wird, lass ich an der Stelle mal weg. Wer es nicht weiß, kann gern nachfragen 🙂

Fangen wir mit dem HTML an. Dabei bedarf es im Grunde „nur“ einer (horizontalen) Liste:

[html]<ul class="tTipList hList">
<li class="relPos">
<a href="#" title="Tool Tip Nummer 1 Link">
<img src="http://dummyimage.com/70×35/000/fff.jpg" alt="Tool Tip Nummer 1" width="50" height="33" />
</a>
<span>Tool Tip #1 Inhalt</span>
</li>
<li class="relPos">
<a href="#" title="Tool Tip Nummer 2 Lnk">
<img src="http://dummyimage.com/70×35/000/fff.jpg" alt="Tool Tip Nummer 2" width="50" height="33" />
</a>
<span>Tool Tip #2 Inhalt</span>
</li>
<li class="relPos">
<a href="#" title="Tool Tip Nummer 3 Lnk">
<img src="http://dummyimage.com/70×35/000/fff.jpg" alt="Tool Tip Nummer 3" width="50" height="33" />
</a>
<span>Tool Tip #3 Inhalt</span>
</li>
<li class="relPos">
<a href="#" title="Tool Tip Nummer 4 Lnk">
<img src="http://dummyimage.com/70×35/000/fff.jpg" alt="Tool Tip Nummer 4" width="50" height="33" />
</a>
<span>Tool Tip #4 Inhalt</span>
</li>
</ul>
[/html]

Hier gibt es eigentlich viel zu zu sagen. Es ist eine Liste mit der Klasse tTipList und die soll horizontal (hList) angeordnet werden.

Jedes Listenelement hat einen Link (welcher in dem Fall mal ein Bild ist). Nach diesem Link ist ein span-Bereich. Das ist der eigentliche ToolTip, welcher beim Drüberfahren angezeigt werden soll. Achtung: ich gehe hier von Bildern als Link aus – darauf beziehe ich mich auch gleich in dem jQuery ToolTip Quelltext.

Das CSS

Auch das ist bis auf ein paar allgemeine Klassen zur Formatierung sehr einfach gehalten:

[css]body {font:13px/1.231 Helmet, Freesans, sans-serif}
img {border: 0}

.hList {margin: 0}
.hList li {display: inline-block; float: left}
.hList a {text-decoration: none}

.relPos {position: relative} /* !! Wichtig, sonst kann li.tTip nicht
daran ausgerichtet werden !! */

.tTipList {margin: 50px 0 0 100px}
.tTipList li {margin-left: 5px}
.tTip {
position: absolute; /* an li ausrichten */
left: 0; /* wird mittels jQuery ermittelt */
top: -35px;
display: none;
white-space: nowrap;
background: #fff; border: 1px solid #aaa;
padding: 5px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.4)
}[/css]

Auch hier ist keine Zauberei am Werk. Das einzigste was wichtig ist: die Listenelemente selbst müssen ein position: relative; erhalten, dass wir den ToolTip mit position: absolute; daran ausrichten können. Wir erinnern uns: position: absolute; richtet sich an dem ersten Element aus, welches nicht position: static; (Default-Wert) enthält!

So … fehlt ja nur noch der Feenstaub: das jQuery himself

jQuery ToolTip Plugin

[javascript]( function( $ ) {
var tTipWrapper = $( ‚ul.tTipList‘ );

tTipWrapper.children().each( function() {
var that = $( this ),
spanTag = that.find( ’span.tTip‘ ),
tTipW = spanTag.outerWidth( true ),
imgW = that.outerWidth( true ),
mLeft = that.css( ‚marginLeft‘ ).replace( /px/, “ ),
left = Math.round( ( spanTag.outerWidth( true ) – imgW ) / 2 ),
setLeft = Math.round( left – (mLeft / 2) );

that.hover( function() {
spanTag.css( ‚marginLeft‘, -setLeft );
spanTag.stop( true, false ).show( 400 );
that.siblings().stop().fadeTo( 400, 0.4 );
}, function() {
spanTag.stop( true, true ).hide( 0 );
that.siblings().stop().fadeTo( 400, 1, function() { that.siblings().css( ‚filter‘, “ ); } );
} );
] );
} )( jQuery );[/javascript]

So, dröseln wir das mal etwas auf …

  • (Zeile 2) wir suchen in unserer DOM-Struktur nach den Listen, bei denen dieser Effekt gewünscht ist
  • (Zeile 4) bei jedem Listenelement (Kindelement von ul.tTipList) arbeiten wir folgendes ab:
  • (Zeile 5) Caching des aktuellen Listenelements
  • (Zeile 6) Suche nach dem span-Tag, welcher den Inhalt für den ToolTip enthält
  • (Zeile 7) Breite des Textes samt margin-Angaben herausfiltern
  • (Zeile 8) Breite des Bildes cachen
  • (Zeile 9) Hat das Listenelement ein margin-left, soll das gespeichert werden, da wir den ToolTip nach links ausrichten werden. Zu beachten ist hier, dass that.css( ‚marginLeft‘ ) eine Angabe mit px zurückliefert. Wir brauchen allerdings nur den Wert selbst und schneiden px einfach ab.
  • (Zeile 10) Differenz zwischen Tooltip- und Bildbreite berechnen, Ergebnis halbieren
  • (Zeile 11) margin-left halbieren und von der Differenz abziehen (hier sollte mit Math.round() gerundet werden)
  • (Zeile 13) bei mouseenter:
  • (Zeile 14) setze ermittelte Position nach links (bedenke: position: absolute;)
  • (Zeile 15) Animations Queue sofort beenden / leeren, weil sonst unschöne Effekte entstehen
  • (Zeile 16) die anderen Elemente leicht ausblenden – nette Fokussteuerung
  • (Zeile 17) bei mouseleave:
  • (Zeile 18) ToolTip wieder verstecken
  • (Zeile 19) und die anderen Elemente wieder einblenden

Und dann hätten wir es auch schon. Das hier ist selbstverständlich nur eine ziemliche Basic Version und man kann es schön weiter ausbauen. Ich wollte damit aber auch nur die Grundlagen legen. Viel Spaß beim testen und rumprobieren 🙂

4 thoughts on “jQuery ToolTip Plugin mit Fokussteuerung

  1. Pingback: Pingback fancy jQuery ToolTip

  2. Elli

    Ich schlage vor, dass du noch einen „Google+“ Button für den Blog einbaust.

  3. Pixel and Dots

    Danke sehr für die gute Anleitung zu einem Tool Tip mit jquery. Ich werde versuchen, es in meine Webseite einzubauen. Hoffe es klappt.

Schreibe einen Kommentar

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