Wirklich einfache JavaScript Tooltips

UPDATE: Eine neue cross-browserfähige Version dieses Scriptes könnt ihr hier finden: Ein einfacher Cross-Browser Tooltip mit JavaScript und CSS.

Heute möchte ich euch zeigen wie man mit wenig JavaScript sehr ansprechende Tooltips erstellen kann, die sich beliebig mit CSS formatieren lassen und deren Inhalt man mit HTML gestalten kann. Bei anderen im Netz erhältlichen Tooltip Scripten sind dafür häufig viele Zeilen Code notwendig. Ich habe jedoch versucht den Code so gering wie möglich zu halten. Worauf außerdem Wert gelegt werden sollte, ist die volle Funktionalität sowohl im Internet Explorer als auch im Mozilla. Und nicht zu vergessen eine hohe Ausführgeschwindigkeit!

Für den Tooltip benötigter HTML Code

Wir nehmen an, dass wir auf unserer Seite einen Link haben bei dem ein Tooltip erscheinen soll, wenn jemand mit der Maus darüber fährt. Wie ein Link aussieht weiß sicher jeder:

Ein Link

Den Tooltip selber definieren wir irgendwo auf der Seite, indem wir ein <div> Element erstellen und dieses mit Text füllen:

Dies ist unser erster Tooltip

Wie ihr seht haben wir dem <div> Element ein class Attribut und ein id Attribut gegeben. Über id können wir gezielt mit JavaScript darauf zugreifen und mit class können wir es mit einem CSS Style formatieren. Wie dieser Style aussieht steht hier:

Die ersten beiden Zeilen sind notwendig, damit wir den Tooltip später überall positionieren können und damit er zuerst einmal nicht auf der Seite angezeigt wird. Die dritte Zeile bestimmt einfach nur die Hintergrundfarbe. Es könnte jedoch noch beliebig erweitert werden, z.B. eine andere Textfarbe.

Das Script

So und nun wollen wir das dieses Element eingeblendet wird. Also müssen wir die CSS Eigenschaft display von none auf block umschalten:

function showWMTT(id) {
	wmtt = document.getElementById(id);
	wmtt.style.display = "block"
}

Wobei wir nun mit document.getElementById(id) über das vorhin definierte Attribut id auf das Element zugreifen und den Wert ändern. Und schon wird der Tooltip angezeigt. Doch noch nicht an der richtigen Position. Da wir wollen das es an der Stelle erscheint wo sich gerade die Maus befindet müssen wir die Mausposition abfragen und dann die top und left Eigenschaften des Elementes entsprechend anpassen:

document.onmousemove = updateWMTT;

function updateWMTT(e) {
	if (wmtt != null && wmtt.style.display == 'block') {
		x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
		y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
		wmtt.style.left = (x + 20) + "px";
		wmtt.style.top 	= (y + 20) + "px";
	}
}

Dieser Code ist auf dem ersten Blick etwas kompliziert, aber im Grunde fragt er je nach Browser auf unterschiedliche Weise die aktuelle Mausposition ab und setzt dann den Tooltip entsprechend. Allerdings addieren wir hier jeweils noch 20 Pixel damit der Tooltip etwas nach unten rechts versetzt erscheint. Diese Funktion wird immer automatisch dann aufgerufen, wenn sich die Mausposition ändert.

Nun brauchen wir nur noch eine Funktion, die den Tooltip wieder ausblendet, wenn wir dies wollen:

function hideWMTT() {
	wmtt.style.display = "none";
}

Zum Abschluß passen wir unseren Link von vorhin noch so an, das jeweils bei MouseOver die Funktion showWMTT und beim MouseOut die Funktion hideWMTT aufgerufen wird:

Unser Link

Jetzt sollte auf unserer Seite folgendes Ergebnis zu sehen sein:

Unser Link

Weitere Tooltips Beispiele

Unser Link jedoch mit CSS angepasst

Unser Link jedoch mit HTML Inhalten

Unser Link jedoch mit Bild im Tooltip

Unser Link mit dem gleichen Bild nur transparent

Der komplette Tooltip Code

Und jetzt noch einmal übersichtlich der komplette Code:

Diese Artikel könnten dich auch interessieren:

• Ein einfacher Cross-Browser Tooltip mit Javascript und CSS
• Die Desktop-Farben nutzen
• Ist display=“none“ jetzt irrelevant?
• Kleine Style Tricks – große Wirkung
• Der kleine Pfeil mal anders