Einfügen von DHTML-Tooltips

Einleitung

DHTML-Tooltips unterscheiden sich in folgenden Punkten von normalen Tooltips (die mittels title-Attribut erzeugt werden):

DHTML-Tooltips erscheinen sofort bei Mouseover, ohne Verzögerung
Das Aussehen der DHTML-Tooltips ist frei bestimmbar (via CSS)
DHTML-Tooltips eignen sich auch für längere Texte (es findet ein automatischer Zeilenumbruch statt)

Umsetzung

Um DHTML-Tooltips einzubinden sind 2 Schritte notwendig:

Einbinden der entsprechenden Javascript- und CSS-Dateien
Einfügen von Tooltip-Aufrufen bei den gewünschten Links

Einbinden der Javascript- und CSS-Dateien

Kopieren Sie die Dateien tooltip.js und tooltip.css in das Verzeichnis wo die HTML-Datei liegt. Fügen Sie in der HTML-Datei ein link- und ein script-Tag ein, um die Dateien einzubinden, und ergänzen sie das onload-Attribut des body-Tags um den Aufruf der Initialisierungsfunktion tt_init(300).

Quelltext

<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="tooltip.css">
    <script type="text/javascript" src="tooltip.js"></script>
  </head>
  <body onload="tt_init(300)">
    ...
  </body>
</html>

Dieses Beispiel finden sie in der Datei bsp7/index.html.

Einfügen von Tooltip-Aufrufen bei den gewünschten Links

Ergänzen Sie Links, bei denen ein Tooltip erscheinen soll, um entsprechende Aufrufe in den onmouseover- und onmouseout-Attributen:

Quelltext

<p>
  <a href="index.html" onmouseover="tt('Text für den Tooltip')" onmouseout="tt()">Link mit Tooltip</a>
</p>

Dieses Beispiel finden sie in der Datei bsp7/index.html.

Anpassen des Erscheinungsbildes der Tooltips

Das Aussehen der Tooltips wird durch die CSS-Angaben in der Datei tooltip.css definiert. Sie können diese Datei beliebig verändern, um die Tooltips anzupassen.

Die maximale Breite der Tooltips (in Pixel) wird durch den beim Aufruf der Initialisierungsfunktion tt_init() übergebenen Parameter bestimmt. Wenn Tooltips maximal 420 Pixel breit sein soll, rufen Sie die Funktion wie folgt auf:

Quelltext

<body onload="tt_init(420)">
  ...
</body>

« zurück zum Inhaltsverzeichnis