JQuery Kochbuch (German Edition)

$('body').append('');

// Leere Variablen
var $tt_title, $tt_alt;

var $tt = $('#tooltip_outer');
var $tt_i = $('#tooltip_inner');

// Auf Hover warten
$('.tooltip').hover(function() {

    // Titel sichern und leeren
    if ($(this).attr('title')) {
     $tt_title = $(this).attr('title');
     $(this).attr('title', '');
    }

    // Alt-Text sichern und leeren
    if ($(this).attr('alt')) {
     $tt_alt = $(this).attr('alt');
     $(this).attr('alt', '');
    }

    // Text einfügen
    $tt_i.html($tt_title);

    // Tooltip anzeigen
    $tt.show();
},
function() {

    // Tooltip verbergen
    $tt.hide();

    // Text leeren
    $tt_i.html('');

    // Titel zurückschreiben
    if ($tt_title) {
     $(this).attr('title', $tt_title);
    }

    // Alt-Text zurückschreiben
    if ($tt_alt) {
     $(this).attr('alt', $tt_alt);
    }

// Auf Bewegung achten
}).mousemove(function(ev) {

    // Koordinaten des Events
    var $ev_x = ev.pageX;
    var $ev_y = ev.pageY;

    // Tooltip-Koordinaten
    var $tt_x = $tt.outerWidth();
    var $tt_y = $tt.outerHeight();

    // Body-Koordinaten
    var $bd_x = $('body').outerWidth();
    var $bd_y = $('body').outerHeight();

    // Tooltip verschieben
    $tt.css({
     'top': $ev_y + $tt_y > $bd_y ? $ev_y − $tt_y : $ev_y,
     'left': $ev_x + $tt_x + 20 > $bd_x ? $ev_x − $tt_x − 10 : $ev_x + 15
    });
});
}

// Los geht's
$(document).ready(function() {
init_tooltip();
});
    Diskussion
    Es sei darauf hingewiesen, dass
$('.tooltip')
nicht der schnellste Weg ist, um Elemente zu selektieren. Bei dieser Demo werden alle Tags auf der Seite geparst, was dem Aufruf
document.getElementsByTagName('*')
entspricht. Abhängig vom Browser und von der Größe des Dokuments kann das ziemlich langsam sein. Wenn Sie diesen Code also wirklich veröffentlichen wollen, sollten Sie darauf achten, die Tags festzulegen, nach denen Sie suchen. So könnten Sie zum Beispiel anstatt
$('.tooltip')
eher
$('a.tooltip, span.tooltip')
verwenden. Die meisten modernen Browser bilden solche Klassen-Selektoren zwar auf
getElementsByClassName
oder
querySelectorAll
(je nach Verfügbarkeit) ab, aber ältere Browser müssen erst die Tag-Namen durchlaufen und dann herausfinden, ob die entsprechende Klasse vorhanden ist.
    Wenn nun mindestens ein Element vorhanden ist, das die Klasse
class="tooltip"
enthält, fügen wir das dynamische Markup am Ende der Seite ein – direkt vor dem schließenden Body-Tag. Es wird nicht sichtbar sein, weil wir in der CSS-Datei für die ID
#tooltip_outer
die Angabe
display:
gemacht haben.
    Als nächstes erstellen wir die leeren Variablen
$tt_title
und
$tt_alt
. Diese werden genutzt, um die Attribute
title
und
alt
(sofern vorhanden) unserer gefundenen Elemente zwischenzuspeichern. Der aufmerksame Leser wird sich jetzt fragen: »Sind wir nicht nur am Attribut
title
interessiert? Warum sollten wir uns um
alt
kümmern?« Guter Einwand. Wir speichern das Attribut
alt
zusätzlich zu
title
, falls
class="tooltip"
für ein Bild genutzt wird. Der Internet Explorer zeigt nämlich dann seinen eigenen Tooltip mit dem Inhalt von
alt
an, und das wollen wir nicht.
    Der restliche Code kümmert sich um die Elemente mit dem Attribut
class="tooltip"
. Wenn man über ein solches Element den Mauscursor bewegt, speichern wir den Inhalt der Attribute
title
und (falls gefüllt)
alt
und löschen sie dann, indem wir sie auf einen leeren String setzen. So stört uns kein Standard-Tooltip vom Browser. Der Inhalt des Attributs
title
wird nun nach
#tooltip_inner
kopiert und
#tooltip_outer
wird angezeigt.
    Verlässt der Mauscursor das Zielelement, dann wollen wir all das rückgängig machen.
#tooltip
wird verborgen, der Inhalt von
#tooltip_inner
auf einen leeren String gesetzt und die Attribute
title
und
alt
auf ihre ursprünglichen Werte gesetzt.
    Schließlich beobachtet die Methode
.mousemove()
die Mausbewegungen, nachdem der Zeiger die Grenzen eines Elements mit
class="tooltip"
überschritten hat. Der Tooltip wird relativ zur Mausposition platziert und erscheint rechts vom Cursor, sofern er damit nicht zu nah am Rand angezeigt würde. In diesem Fall würde ein horizontaler Scrollbar erscheinen, den wir nicht haben wollen. Um dieses Problem zu umgehen, lassen wir den Tooltip dann auf der linken Seite des Cursors anzeigen. Das gleiche gilt auch vertikal. Befindet sich der Tooltip zu nah am unteren Rand einer Seite, wird er über dem Mauscursor angezeigt.

In einem Baum navigieren
    Problem
    Auf Seiten mit sehr umfangreichen Inhalten und diversen Ebenen der