Tooltips mit JavaScript (JavaScript Tutorial)

Tutorial erstellt von Ingo, letzte Änderung am 23.03.2008

Alle diejenigen, die schon einmal Tooltips nur mit CSS und ohne JavaScript erstellt haben, werden sich
erinnern: es ist und bleibt eine heikle Sache. Die Grundkonstruktion ist zwar recht überschaubar, aber
der Teufel steckt wie immer im Detail - und im Versuch, es allen möglichen Browsern recht zu machen.

Wenn man allerdings davon ausgeht, dass JavaScript aktiviert ist, bietet sich eine weitaus weniger
anfällige Version von Tooltips an, die zum Beispiel auch im Opera funktioniert. Ein wenig Erfahrung
mit JavaScript kann hierbei allerdings nicht schaden.

Die Idee

Der HMTL-Teil sieht wie üblich aus: Jedes zu erläuternde Wort wird in einen Link gepackt, in dem
wiederum ein span liegt, der die Zusatz-Info für den Tooltip enthält. Der span bleibt aber dauerhaft
unsichtbar, er dient nur als Info-Behälter vor Ort.

Im HTML-Dokument gibt es ein zu Beginn unsichtbares Div mit id = "info", das ist unser Tooltip. Wenn
man mit der Maus über einen Tooltip-Link fährt, wird das Info-Div mit dem Info-Text aus dem span gefüllt
und dann neben dem Mauszeiger angezeigt, solange sich die Maus über dem Wort befindet.

Code:

Das ist ein Satz mit einem <a href="#" class="tooltip">Tooltip<span><b>Überschrift</b>
Hier steht ein kurzer Infotext zu "Tooltip"</span></a>, der mit JavaScript funktioniert.

<div id="info"></div>

Um die Sache für den Nutzer unseres Skripts bequem zu halten, werden wir das Info-Div ebenfalls per
JavaScript in den <body> schreiben. - Wer das dennoch von Hand erledigen möchte, beachte folgendes:

Weil dieses Info-Div ohnehin frei positioniert wird, kann und sollte man es als direktes Child irgendwo in
den <body> schreiben, vorzugsweise aber ans Ende des Dokuments: Im IE kommt es sonst -warum auch
immer- unter bestimmten Umständen zu einem unschönen Effekt, den man dann umgehen kann, indem
man dem Info-Div z.B. ein weiteres Tooltip-freies Div anfügt, am besten ein ganz leeres, damit es das
Layout nicht weiter stört. - Die Idee nun noch einmal in ein Bild gefasst:

Das Skript

Zu Beginn -genauer: "onload", also kurz nachdem das Dokument im Browser aufgebaut ist- erzeugt die
Funktion initTooltips ein leeres Div mit id="info" und hängt ganz ans Ende des Dokuments ein.

Dann werden bei jedem Link mit der Klasse "tooltip" die Eventhandler onmousemove und onmouseout
gesetzt, und zwar auf Funktion showTip bzw. hideTip: showTip sucht das erste span-Element im Link,
kopiert dessen Inhalt in das Info-Div und lässt das Info-Div neben der Maus anzeigen. hideTip macht
das Info-Div dann einfach wieder unsichtbar:

Code:

<body onload="initTooltips()">

function initTooltips()
{
    // erzeuge Info-Div und baue es ein

    // setze bei jedem Link der Klasse "tooltip" die Eventhandler ...
    //   onmouseover auf showTip
    //   onmousout   auf hideTip
}

function showTip(ev)
{
    // Suche im Link nach einem SPAN
    //   und kopiere dessen Inhalt ins Info-Div
    // Dann mache das Info-Div sichtbar
    //   und zwar rechts unterhalb des Links
}

function hideTip()
{   // Mache Info-Div wieder unsichtbar    }

showTip(ev)

Im Verlauf der Funktion brauchen wir die Mauskoordinaten. Diese liefert uns das Event-Objekt, das je nach
Browser als Funktions-Argument übergeben wird oder aber eine Eigenschaft des window-Objektes ist. Die
folgende Zeile findet man sinngemäß auch vielen anderen Skripts. Sie stellt sicher, dass in der Variable ev
auch wirklich das Event-Objekt steckt:

Code:

function showTip(ev)
{
if(!ev) { ev = window.event; }
...

Dann machen wir uns auf die Suche nach dem ersten span innerhalb des Tooltip-Links, der hier greifbar
ist über die Variable this. childNodes liefert alle Textportionen und HTML-Elemente innerhalb des Links.
Wenn ein Child mit Tagname "SPAN" dabei ist, kopieren wir dessen Inhalt (innerHTML) in den infotext
und beenden die Schleife:

Code:

    var infotext = '';

    for(var n=0; n<this.childNodes.length; n++)
    {
        if(this.childNodes[n].tagName == "SPAN")
        {
            infotext = this.childNodes[n].innerHTML; break;
        }
    }

Wenn der gefundene Text nicht leer ist, beschaffen wir uns das Info-Div mittels getElementById('info') und
setzen dessen innerHTML auf den Inhalt von "infotext"; wir kopieren also letztlich nur den span-Inhalt ins
Info-Div. Dann machen wir das Div sichtbar und positionieren es 20px rechts unterhalb der Maus:

Code:

    if(infotext.length)
    {
        infodiv = document.getElementById('info');
        infodiv.innerHTML = infotext;

        infodiv.style.display = 'block';

        var scrollOffset = getScrollOffset();

        infodiv.style.top  = ev.clientY + scrollOffset[1] + 20 + 'px';
        infodiv.style.left  = ev.clientX + scrollOffset[0] + 20 + 'px';
    }

Beim Positionieren muss man berücksichtigen, dass der Nutzer die Seite evtl. nach unten oder rechts
gescrollt hat. Deswegen erfragen wir mittels der Hilfsfunktion getScrollOffset() diese Scrollwerte.

hideTip()

onmouseout wird eine ganz kurze Funktion gerufen, die einfach nur das Info-Div unsichtbar macht:

Code:

function hideTip()
{
document.getElementById('info').style.display = 'none';
}

Die Hilfsfunktionen

initTooltips()

Ganz zu Beginn erzeugen wir ein Div-Element, geben ihm die ID "Info" und hängen dieses Div mittels
appendChild als letztes Element in den <body> ein; den <body> bekommen wir zu fassen, indem wir
im Dokument nach Elementen mit Tagnamen 'BODY' suchen (liefert ein Array von Elementen) und dann
das erste solche Element (Index 0 im Array) auswählen:

Code:

var infodiv = document.createElement('DIV');
infodiv.id = 'info';
document.getElementsByTagName('body')[0].appendChild(infodiv);

Damit nun die Tooltip-Links auf die Maus reagieren, müssen wir noch deren Eventhandler onmousemove
auf showTip() und onmouseout auf hideTip() setzen. Diese stupide Arbeit erledigt folgender Abschnitt für uns:

Wir verschaffen uns eine Liste aller Links und durchlaufen diese Liste. Wenn ein Link ein Tooltip ist,
also seine class das Wort "tooltip" enthält, setzen wir die beiden Eventhandler auf showTip und hideTip:

Code:

var liste = document.getElementsByTagName('A');

for (var n=0; n<liste.length; n++)
{
    if(liste[n].className.match( /tooltip/ ))
    {
        liste[n].onmousemove = showTip;
        liste[n].onmouseout =  hideTip;
    }
}

In JavaScript heißt es übrigens className statt 'class', weil das Wort 'class' bereits für etwas anderes
reserviert ist. - Auch wichtig: den Eventhandlern werden die Funktionsnamen übergeben, ohne runde
Klammern. Der Unterschied: Der Funktionsname steht in etwa für die Adresse der Funktion im Speicher;
mit Klammern steht der Ausdruck für den Rückgabewert der Funktion, mit dem ein Eventhandler aber
nichts anfangen kann. — Nicht vergessen: initTooltips 'onload' aufrufen, und wir sind bereit zum Test:

Code:

<body onload="initTooltips();"> ... viel Zeugs ... </body>

getScrollOffset()

Diese Funktion (siehe unten im kompletten Quelltext) habe ich im wesentlichen von Peter-Paul Koch
(www.quirksmode.org) übernommen. Sie ermittelt, wieviel bereits nach unten bzw. rechts gescrollt wurde,
und liefert die gefundenen Pixelwerte oder aber (0,0) zurück. Dass man ein solches Script auf einer Seite
mit dem Namen "quirksmode" findet, ist kein Zufall: Die Geometriedaten des Viewports festzustellen, ist
immer noch eine heikle Sache. Wer Genaueres wissen will, sei auf den sehr nützlichen Artikel
dort verwiesen.

Alles zusammen - ein Testdokument

Nun also ein Testdokument: einfach in eine leere Datei kopieren und los geht's. HTML und CSS
sind eher schlicht gehalten. Im CSS sind wichtige Stellen markiert - Vorsicht bei Änderungen hier.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Tooltips mit JavaScript - Demodatei</title>
  <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />

  <style type="text/css">
  /* <![CDATA[ */

a.tooltip
{     text-decoration: none;
      border-bottom: 1px solid red;
      color: #444444;
      font-weigh: bold;
}

a.tooltip span  { display: none; }         /* ! */

#info
{     position: absolute;              /* ! */
      display: none;                   /* ! */
      width: 150px;
      background: #ffffdd; padding: 7px;
      border: 1px solid #666666;
}

#info b
{     display: block;
      border-bottom: 1px solid #666666;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 90%;
}

  /* ]]> */
  </style>

  <script type="text/javascript">
  /* <![CDATA[ */

  function showTip(ev)
  {
      if(!ev) { ev = window.event; };

      var infotext = '';

      for(var n=0; n<this.childNodes.length; n++)
      {
          if(this.childNodes[n].tagName == "SPAN")
          {
              infotext = this.childNodes[n].innerHTML; break;
          }
      }

      if(infotext.length)
      {
          infodiv = document.getElementById('info');
          infodiv.innerHTML = infotext;

          infodiv.style.display = 'block';

          var scrollOffset = getScrollOffset();

          infodiv.style.top  = ev.clientY + scrollOffset[1] + 20 + 'px';
          infodiv.style.left = ev.clientX + scrollOffset[0] + 20 + 'px';
      }
  }

  function hideTip()
  {   document.getElementById('info').style.display = 'none';   }

  function initTooltips()
  {
      var infodiv = document.createElement('DIV');
      infodiv.id = 'info';
      document.getElementsByTagName('body')[0].appendChild(infodiv);

      var liste = document.getElementsByTagName('A');

      for (var n=0; n<liste.length; n++)
      {
          if(liste[n].className.match( /tooltip/ ))
          {
              liste[n].onmousemove = showTip;
              liste[n].onmouseout  = hideTip;
          }
      }
  }

  function getScrollOffset()          // Funktionskörper von quirksmode.org
  {
      var x = 0, y = 0;
      if (self.pageYOffset)          // all except Explorer
      {
          x = self.pageXOffset;
          y = self.pageYOffset;
      }
      else if (document.documentElement && document.documentElement.scrollTop)
               // Explorer 6 Strict
      {
          x = document.documentElement.scrollLeft;
          y = document.documentElement.scrollTop;
      }
      else if (document.body)           // all other Explorers
      {
          x = document.body.scrollLeft;
          y = document.body.scrollTop;
      };
      return new Array(x,y);
  }

  /* ]]> */
  </script>

</head>
<body onload="initTooltips()">

Das ist ein Satz mit einem <a href="#" class="tooltip">Tooltip<span><b>Überschrift</b>
Hier steht ein kurzer Infotext zu "Tooltip"</span></a>, der mit JavaScript funktioniert.

</body>
</html>

Das ist natürlich nur ein Vorschlag. Ein nächster Schritt könnte sein, das JavaScript ebenso wie den CSS-Teil
in eine eigene Datei auszulagern und die Tooltips in verschiedene Dokumente einzubauen. Außerdem könnte
man die Styleregeln noch an den eigenen Geschmack oder eine Seite anpassen - kurzum, wer mag sollte
experimentieren, um so den größtmöglichen Nutzen aus diesem Skript zu ziehen. - Frohes Schaffen!

Moment noch: Und was ist ohne JavaScript - alles dunkel?

So, wie unsere Tooltips bisher aussehen, bleiben sie dem Nutzer völlig verborgen, wenn JavaScript nicht
aktiv ist. Und das obwohl es Tooltips eigentlich in jedem Browser gibt, und zwar in Form des title-Attributs.
Allerdings ist das eine einzeilige, nicht formatierbare Variante:

Code:

Das ist ein <a href="#" title="Info zum Begriff">Tooltip</a>

Die Idee

Wir schreiben unsere Infos zunächst als title-Attribut in de HTML-Text, wie gerade gesehen. Wenn dann
die Seite geladen wird und JavaScript nicht aktiv ist, sieht der Nutzer immerhin die einfachen title-Tooltips.
Wenn Javascript aber aktiv ist, verfrachten wir den Inhalt des titles in einen neu erzeugten span und bauen
diesen in den Link ein.
Weil wir nun im title-Attribut keine HTML-Tags unterbringen dürfen ("</" würde den title abbrechen), müssen
wir uns für das "Markup" innerhalb des Info-Textes etwas anderes überlegen. Wie wäre es da mit BBC? Wir
fügen [ b] und [ /b] (ohne Leerzeichen) und ähnliches in den title-Text ein und sorgen beim Transport des
title-Textes in den span dafür, dass die BBCs in HTML gewandelt werden - die Idee im Bild:

Ab dann verfahren wir wie oben: Eventhandler setzen und showTip / hideTip die Arbeit machen lassen.

Die Funktion title2span

Die Funktion erhält als Argument meinLink einen Link und merkt sich dessen title-Text in der Variablen tiptext (1).
Darin ersetzen wir die eckigen Klammern durch spitze - aus BBC wird HTML (2). Dann erzeugen wir ein span-
Element (3) und füllen dessen Inneres mit dem tiptext (4). Zum Schluss fügen wir den span in den Link ein (5)
und löschen noch das title-Attribut (6), weil es sonst zusätzlich zum Tooltip angezeigt würde:

Code:

function title2span(meinLink)
{
    var tiptext = meinLink.title;                                              // 1

    tiptext = tiptext.replace(/\[/g,"<");                          // 2   ersetze (g)lobal jede [ durch eine <
    tiptext = tiptext.replace(/\]/g,">");

    var sp = document.createElement('span');        // 3
    sp.innerHTML = tiptext;                                        // 4

    meinLink.appendChild(sp);                                           // 5
    meinLink.removeAttribute('title');                                  // 6
}

So einfach ist das ;o) Diese neue Funktion fügen wir in den JavaScript-Teil oben ein. Außerdem ergänzen
wir noch die Funktion initTooltips um eine Zeile:

Code:

.....     if(liste[n].className.match( /tooltip/ ))
          {
              title2span(liste[n]);                     // <== NEUE ZEILE, title in span wandeln

              liste[n].onmousemove = showTip;
              liste[n].onmouseout  = hideTip;
          }
.....

Das war's auch schon. Wenn wir nun folgendes in den HTML-Text schreiben ...

Code:

Das ist ein <a href="#" class="tooltip" title="[ b]Info[ /b] Dieser [ i]Tooltip[ /i]
wurde aus einem title generiert">Tooltip</a>, diesmal sogar mit "BBC" ;o)

(ohne Leerzeichen in den Klammern [ ] ) ... macht title2span daraus das hier:

Code:

Das ist ein <a href="#" class="tooltip">Tooltip<span><b>Info</b> Dieser <i>Tooltip</i> wurde
aus einem title generiert</span></a>, diesmal sogar mit "BBC" ;o)

Der replace-Befehl beinhaltet ein Suchmuster in Form eines "regulären Ausdrucks" (RegEx). RegEx sind sehr
mächtige Konstrukte und werden von etlichen Sprachen unterstützt (z.B. JavaScript, PHP, Perl), will heißen:
unser "BBC-Parser" könnte noch erheblich verfeinert werden - Material genug für ein eigenes Tutorial ;o).

Geschafft. Jetzt sind die Tooltips mit und ohne JavaScript verfügbar. Wenn der Info-Text im span liegt,
kann man ihn bzw. den span und seinen Inhalt mit CSS formatieren, ganz wie in der ersten Version oben.
Und auch hier gilt selbstverfreilich: am besten selber testen, verändern, anpassen ... Viel Vergnügen!

Links: www.quirksmode.org, dort unter anderem der oben erwähnte Artikel.

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Photoshop

Cinema 4d

HTML / CSS

JavaScript

PHP

Flash

Fotografie

Terragen

Webserver

Informatik

Sonstige

Tooltips mit JavaScript (JavaScript Tutorial)