Ein einfacher Cross-Browser Tooltip mit Javascript und CSS

Vor einiger Zeit habe ich hier auf webmatze.de einen einfachen auf JavaScript und CSS basierenden Tooltip vorgestellt, mit dem sich schnell und einfach Tooltips in die eigenen Seiten integrieren ließen. Dieser funktionierte soweit auch ganz gut in vielen Browsern, doch die Zeit ist nicht stillgestanden und seit der Veröffentlichung hat es einige neue Browserversionen und sogar ganz neue Browser gegeben.

Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.

Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.

XBT - Der Cross-Browser Tooltip

Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.

Hier könnt ihr den Code sehen:

(function (window, document, undefined) {
    var XBTooltip = function (element, userConf, tooltip) {
        var config = {
            id: userConf.id || undefined,
            className: userConf.className || undefined,
            x: userConf.x || 20,
            y: userConf.y || 20,
            text: userConf.text || undefined
        };

        var over = function (event) {
                tooltip.style.display = "block";
            },
            out = function (event) {
                tooltip.style.display = "none";
            },
            move = function (event) {
                event = event ? event : window.event;
                if (event.pageX == null && event.clientX != null) {
                    var doc = document.documentElement, body = document.body;
                    event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
                    event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
                }
                tooltip.style.top = (event.pageY + config.y) + "px";
                tooltip.style.left = (event.pageX + config.x) + "px";
            }
        if (tooltip === undefined && config.id) {
            tooltip = document.getElementById(config.id);
            if (tooltip) tooltip = tooltip.parentNode.removeChild(tooltip)
        }
        if (tooltip === undefined && config.text) {
            tooltip = document.createElement("div");
            if (config.id) tooltip.id = config.id;
            tooltip.innerHTML = config.text;
        }
        if (config.className) tooltip.className = config.className;
        tooltip = document.body.appendChild(tooltip);
        tooltip.style.position = "absolute";
        element.onmouseover = over;
        element.onmouseout = out;
        element.onmousemove = move;
        over();
    };
    window.XBTooltip = window.XBT = XBTooltip;
})(this, this.document);

Das einzig wirklich benötigte CSS für den Tooltip sieht so aus:

.xbtooltip {
  display: none;
  position: absolute;
  background-color: #fff;
}

Dieser kann aber für jeden einzelnen Tooltip noch einmal separat überschrieben werden. Doch dazu später mehr.

Tooltip Beispiele

Kommen wir also zu ein paar einfachen Beispielen, wie man das XBT Tooltip Script einsetzen kann.

Einfacher Tooltip

Der einfachste mögliche Tooltip benötigt einen Link und ein DIV Element mit dem anzuzeigenden Inhalt für den Tooltip.

<a href="http://webmatze.de" onMouseOver="XBT(this, {id:'tt1'})">Ein normaler Tooltip...</a>
<div id="tt1" className="xbtooltip">...mit bereits vorhandenem Inhalt.</div>

Dem Tooltip Script wird also über eine Konfiguration welche in geschweiften Klammern steht, die id des Elementes übergeben, welches den Inhalt für den Tooltip enthält. Mehr ist hier nicht notwendig.

Das entsprechende CSS dazu kann z.B. so aussehen:

#tt1 {
      background-color: #00FFFF;
      color: green;
      padding: 3px;
      width: 120px;
    }

Und so sieht dann der Link mit dem Tooltip aus:

Ein normaler Tooltip...

Inhalt als Konfiguration übergeben

Wer nicht extra für jeden Tooltip ein extra DIV Element erstellen möchte, kann den gewünschten Inhalt für den Tooltip auch gleich als text übergeben. Das kann dann z.B. so aussehen:

<a href="http://webmatze.de"
   onMouseOver="XBT(this, {text: '...indem man ihn &lt;strong&gt;als Text&lt;/strong&gt; übergibt', className: 'xbtooltip'})">
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
</a>

Als Konfiguration wird also nicht mehr eine id übergeben, sondern ein beliebiger Text, der auch HTML Elemente enthalten kann. Über den Parameter className kann man dem Tooltip dann einen beliebigen Style zuordnen.

Und so sieht das Ganze dann aus:

Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...

Den Abstand des Tooltips anpassen

Wenn man möchte, dass der Tooltip nicht direkt neben dem Mauszeiger, sondern weiter entfernt angezeigt wird, kann man dies über die Konfiguration anpassen. Dazu gibt es die beiden Parameter x und y.

<a href="http://webmatze.de" onmouseover="XBT(this, {id: 'tt4', x: 50, y: 50})">Man kann den Abstand des Tooltips anpassen...</a>
<div id="tt4" class="xbtooltip">
...indem man eine Konfiguration übergibt
</div>

Somit wird der Tooltip nun jeweils 50 Pixel nach rechts und unten verschoben angezeigt.

Man kann den Abstand des Tooltips anpassen...

Funktioniert nicht nur bei Links

Natürlich kann man den Tooltip auch an andere HTML Elemente hängen. Es muss nicht immer ein Link sein.

<div style="position: relative; top: 0px; left: 150px; width: 200px; height: 100px; background-color: #e4e4e4;" 
  onmouseover="XBT(this, {id:'tt2'})">Das
    funktioniert auch mit DIVs statt mit Links...
    <div id="tt2" className="xbtooltip">...soweit der Browser onmouseover auf DIV Elementen unterstützt!</div>
</div>

Dies würde dann so aussehen:

In absolut positionierten Elementen funktioniert es auch

Mit dem alten Tooltip Script gab es immer Probleme mit Tooltips, die sich in anderen absolut prositionierten Elementen befanden. Hier wurden die Tooltips immer an einer falschen Position angezeigt.

Mit dem neuen Script ist dies nun auch kein Problem mehr:

<div style="position: absolute; top: 0px; left: 300px; width: 200px; height: 100px; background-color: #e4e4e4;">
    <a href="http://eventicus.de" onmouseover="XBT(this, {id:'tt3'})">Genauso auch mit Tooltips...</a>
    <div id="tt3" class="xbtooltip">...die sich in absolut positionierten Elementen befinden.</div>
</div>

Und so sieht's dann aus:

Fazit

Ich hoffe ihr könnt mit diesem neuen Script etwas anfangen und wünsche euch viel Spaß damit. Sollten euch doch noch Probleme auffallen, oder sollte es in einem Browser nicht richtig funktionieren, so könnt ihr mir dies wie immer in den Kommentaren mitteilen.

Ich denke auch das neue Script ist immer noch sehr kompakt und einfach zu verwenden. Vielleicht werde ich in Zukunft noch ein paar Funktionen nachrüsten, sofern ihr noch Wünsche habt, die unbedingt enthalten sein sollten.