jQuery ToolTip Plugin mit Fokussteuerung

In letz­ter Zeit setze ich bei mei­nen Projekten wie­der ver­stärkt auf die Verwendung von jQuery. Dabei habe ich rela­tiv hüb­sche Sachen gestal­ten kön­nen, wel­che ich euch nicht vor­ent­hal­ten möchte. Heute geht es um ein klei­nes süßes jQuery ToolTip Plugin.

Demonstration

Link zur Demo des jQuery ToolTip

Vorschau des jQuery ToolTip

Es ist hier im Artikel extrem basic gehal­ten und kann aber nach Wünschen rela­tiv ein­fach umge­stal­tet wer­den. Das Resultat soll fol­gen­der­ma­ßen aussehen:

Die HTML-Umsetzung

Um das ganze Problem rela­tiv ein­fach zu hal­ten, bedarf es nicht viel Quältext. Wir brau­chen ein wenig Markup (HTML), etwas Schönheitskosmetik (CSS) und ein paar Werkzeuge (jQuery). Wir jetzt eine CSS-Datei oder das jQuery Framework ein­ge­bun­den wird, lass ich an der Stelle mal weg. Wer es nicht weiß, kann gern nach­fra­gen

Fangen wir mit dem HTML an. Dabei bedarf es im Grunde “nur” einer (hori­zon­ta­len) Liste:

<ul class="tTipList hList">
<li class="relPos">
<a href="#" title="Tool Tip Nummer 1 Link">
<img src="http://dummyimage.com/70x35/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/70x35/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/70x35/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/70x35/000/fff.jpg" alt="Tool Tip Nummer 4" width="50" height="33" />
</a>
<span>Tool Tip #4 Inhalt</span>
</li>
</ul>

Hier gibt es eigent­lich viel zu zu sagen. Es ist eine Liste mit der Klasse tTi­pList und die soll hori­zon­tal (hList) ange­ord­net werden.

Jedes Listenelement hat einen Link (wel­cher in dem Fall mal ein Bild ist). Nach die­sem Link ist ein span–Bereich. Das ist der eigent­li­che ToolTip, wel­cher beim Drüberfahren ange­zeigt wer­den soll. Achtung: ich gehe hier von Bildern als Link aus — dar­auf beziehe ich mich auch gleich in dem jQuery ToolTip Quelltext.

Das CSS

Auch das ist bis auf ein paar all­ge­meine Klassen zur Formatierung sehr ein­fach gehalten:

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)
}

Auch hier ist keine Zauberei am Werk. Das ein­zigste was wich­tig ist: die Listenelemente selbst müs­sen ein posi­tion: rela­tive; erhal­ten, dass wir den ToolTip mit posi­tion: abso­lute; daran aus­rich­ten kön­nen. Wir erin­nern uns: posi­tion: abso­lute; rich­tet sich an dem ers­ten Element aus, wel­ches nicht posi­tion: sta­tic; (Default-Wert) enthält!

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

jQuery ToolTip Plugin

( 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 );

So, drös­eln wir das mal etwas auf …

• (Zeile 2) wir suchen in unse­rer DOM-Struktur nach den Listen, bei denen die­ser Effekt gewünscht ist
• (Zeile 4) bei jedem Listenelement (Kindelement von ul.tTipList) arbei­ten wir fol­gen­des ab:
• (Zeile 5) Caching des aktu­el­len Listenelements
• (Zeile 6) Suche nach dem span-Tag, wel­cher den Inhalt für den ToolTip enthält
• (Zeile 7) Breite des Textes samt mar­gin–Angaben her­aus­fil­tern
• (Zeile Breite des Bildes cachen
• (Zeile 9) Hat das Listenelement ein margin-left, soll das gespei­chert wer­den, da wir den ToolTip nach links aus­rich­ten wer­den. Zu beach­ten ist hier, dass that.css( ‘mar­gin­Left’ ) eine Angabe mit px zurück­lie­fert. Wir brau­chen aller­dings nur den Wert selbst und schnei­den px ein­fach ab.
• (Zeile 10) Differenz zwi­schen Tooltip– und Bildbreite berech­nen, Ergebnis halbieren
• (Zeile 11) margin-left hal­bie­ren und von der Differenz abzie­hen (hier sollte mit Math.round() gerun­det werden)
• (Zeile 13) bei mouseenter:
• (Zeile 14) setze ermit­telte Position nach links (bedenke: posi­tion: abso­lute;)
• (Zeile 15) Animations Queue sofort been­den / lee­ren, weil sonst unschöne Effekte entstehen
• (Zeile 16) die ande­ren Elemente leicht aus­blen­den — nette Fokussteuerung
• (Zeile 17) bei mouseleave:
• (Zeile 18) ToolTip wie­der verstecken
• (Zeile 19) und die ande­ren Elemente wie­der einblenden

Und dann hät­ten wir es auch schon. Das hier ist selbst­ver­ständ­lich nur eine ziem­li­che Basic Version und man kann es schön wei­ter aus­bauen. Ich wollte damit aber auch nur die Grundlagen legen. Viel Spaß beim tes­ten und rum­pro­bie­ren