Tooltips

Man kennt sie von Links und Bildern, ganz zu schweigen von den etlichen Programmen in denen sie vorkommen - Tooltips, die kleinen Helferlein. Oft enthalten sie Erklärungen oder weiterführende Informationen mit denen man etwas erst verstehen kann. Es gibt nur einen gravierenden Nachteil: Man kann Tooltips nicht via CSS seinem Seitendesign anpassen. Hier helfen Tooltips weiter die mit JavaScript erzeugt werden, diese kann man nämlich voll mit CSS designen.

Überlegungen - und ein Hinweis

Wie kann man einen Tooltip mit JavaScript realisieren? In der vorgestellten Lösung wird folgender Ansatz verfolgt: Jeder Tooltip ist ein eigener <code>div</code>-Abschnitt innerhalb des Dokuments, JavaScript steuert nur noch die Positionierung und die Anzeige des Tooltips. Das ist eine simple Methode, sie funktioniert aber einwandfrei und ist leicht zu verstehen. Der Nachteil: Ein aktueller Browser wird benötigt, erfolgreich getestet wurde die Methode bisher mit Mozilla, Netscape 6 sowie dem Internet Explorer 6.

Ein Tooltip als HTML-Element

Den eigentlichen Tooltip definieren wir als einen simplen <code>div</code>-Abschnitt im <code>body</code> der HTML-Seite, wichtig ist nur das jeder Tooltip eine eindeutige ID enthält um später von JavaScript angesprochen werden zu können. Hier ein Beispiel für einen solchen Tooltip:

<div id="tooltip01" class="tooltip">
Hier kommt der Text des Tooltips hin, also das was angezeigt werden soll.
</div>

Wie schon gesagt ist der id-Teil wichtig, in den Anführungszeichen muss ein eindeutiger Name stehen. Wird ein Name mehrfach vergeben kann das JavaScript welches die Tooltips anzeigt und positioniert den Tooltip nicht finden, als Konsequenz wird einfach kein Tooltip angezeigt. Der class-Teil bezieht sich auf folgenden CSS-Code, welcher verhindert das der Tooltip beim laden der Seite angezeigt wird und später über den anderen Elementen angezeigt wird.

div.tooltip {
z-index: 200;
display: none;
}

In dieser CSS-Deklaration können dann auch weitere Angaben gemacht werden um den Tooltip zu formatieren, beispielsweise Hintergrund- und Textfarbe. Sämtliche Möglichkeiten von CSS stehen offen.

Einen Tooltip anzeigen

Bevor es an den JavaScript-Code geht möchte ich erst einmal zeigen wie man später einen Tooltip anzeigt. Hat man z.B. einen Link zu dem man den Tooltip mit der id "tooltip01" deklariert man den Link wie folgt:

<a href="linkziel.html"
title="dieser Link führt Sie zum Ziel"
onmouseover="toggleTooltip ('tooltip01')"
onmouseout="toggleTooltip ('tooltip01')">ein Link</a>

Wichtig sind hier die onmouseover- und onmouseout-Deklarationen: Sie rufen die JavaScript-Funktion auf die den Tooltip anzeigt oder versteckt. Als Argument übergibt man der Funktion einfach die id des Tooltips.

Die Magie dahinter: Der JavaScript-Code

Im folgenden gibt es den kompletten JavaScript-Code der benötigt wird, Erklärungen zum Code folgen danach.

var mouseX = 0, mouseY = 0;       // beinhalten später die Position des Mauszeigers
var xMargin = 10, yMargin = 10; // zusätzlicher Abstand zum Mauszeiger
var ttipDisplayed = false; // Statusvariable, nicht ändern

// Event-Handler, speichert ständig die aktuelle Position der Mauszeigers
function saveMouseCoords (e)
{
if (window.Event) // Netscape
{
mouseX = e.pageX;
mouseY = e.pageY;
}
else // MSIE
{
mouseX = window.event.clientX;
mouseY = window.event.clientY;
}
}

// Steuert Anzeige und Position des angegebenen Tooltips
function toggleTooltip (ttipId)
{
var elem = document.getElementById (ttipId);

if (elem != null)
{
if (elem.style.display == "none" || ttipDisplayed == false)
{
elem.style.left = (mouseX + xMargin) + "px";
elem.style.top = (mouseY + yMargin) + "px";
elem.style.display = "block";
ttipDisplayed = true;
}
else
{
elem.style.display = "none";
ttipDisplayed = false;
}

return true;
}
else
return false;
}

// Einbinden des Event-Handlers
if (document.captureEvents)
document.captureEvents (Event.MOUSEMOVE);

document.onmousemove = saveMouseCoords;

Das ist also der Code - nicht wirklich schwer zu verstehen, oder? Dennoch möchte ich noch ein paar Worte verlieren. Zu den Variablen die am Anfang des Codes deklariert werden: An xMargin und yMargin kann nach Lust und Laune rumgespielt werden, wichtig ist nur das diese Variablen nur Zahlen enthalten - sie definieren den zusätzlichen Abstand des Tooltips vom Mauszeiger. Die anderen Variablen sollten jedoch nicht geändert werden.

Weiter geht es mit der Funktion saveMouseCoords, deren einziger Zweck es ist die Variablen mouseX und mouseY mit der jeweils aktuellen Position des Mauszeigers zu füllen. Daher wird diese Funktion ganz am Ende des Codes als sog. Event-Handler registriert (document.onmousemove = saveMouseCoords), was im Grunde nur bedeutet das sie jedes mal aufgerufen wird wenn der überwachte Event eintritt. In unserem Fall wird sie also jedes mal aufgerufen wenn sich der Mauszeiger bewegt.

Schließlich folgt dann noch die Funktion toggleTooltip, welche je nach aktuellem Status (der gewünschte Tooltip wird momentan angezeigt / wird momentan nicht angezeigt) den Tooltip entweder positioniert und sichtbar macht oder den Tooltip verschwinden lässt. Dazu werden einfach ein paar CSS-Angaben die man via JavaScript ansprechen kann (elem.style.[Name der Eigenschaft]) modifiziert.

Letzte Worte

Die hier vorgestellte Methode funktioniert wie schon geschrieben nur mit einem aktuellen Browser, Schuld ist die eingesetzte Funktion document.getElementById, welche nur in neueren Browsern implementiert ist. Um den Code in älteren Browsern lauffähig zu gestalten muss man hier eine andere Möglichkeit finden um die Tooltip-divs ansprechen zu können.