Javascript ist Toll!

24. August 2005 - 10:22

Tooltip

Beschreibung

Tooltips sind die kleine gelben Kästchen, die angezeigt werden, wenn der Mauszeiger über ein Elemente steht.
Am einfachsten lassen sich diese mit dem title Attribut umsetzen. Jedes HTML Elemente läßt sich mit dieser Eigenschaft belegen:

Selbst über diesen em Tag Abschnitt wird der Title angezeigt

Aber manchmal wünscht man sich eine Formatierung des Kästchen, die läßt sich mit JS umsetzen. Dieses Tooltip Skript ist relativ simpel und läßt sich einfach in den HTML Code integrieren. Das gewünschte Element muss lediglich als CSS Klasse tooltip erhalten und das Skript muss eingebunden werden. Der Text der im Tooltip erscheinen soll, wird im title Attribut eingetragen. Das sieht dann ungefähr so aus:

<a href="#" class="tooltip" title="TEST TEXT" >Tooltip</a>

Das Aussehen des Tooltip kann entweder im JS Code oder im CSS definiert werden.

var tt_styles            = new Object();
tt_styles.width          = '9em';
tt_styles.backgroundColor = '#ff0';
tt_styles.color           = '#000';
tt_styles.fontSize        = '1em';
tt_styles.padding         = '2px';
tt_styles.border          = '1px solid black';
...

Ausschnitt aus der tooltip.js Datei

Alternativ kann im CSS die ID des Tooltips verwendet werden um dieses zu gestalten. Per default lautet die ID tooltip dies kann aber auch im Quellcode geändert werden.

Download:

tooltip.js ca. 4 KB

Beispiele

Tooltip 1

Tooltip 2

Browser

ähnliche Artikel

  • Kein ähnlicher Artikel
  • Comments (3)
    517 mal gelesen.

    3 Kommentare

    Leave a comment »

    Seiten:

    1. Kommentar von: nick77
    5. Januar 2006: 14:10

    Solche Tooltips (wenn schon ohne zusätzliche Effekte wie Fade oä) lassen sich auch mit purem CSS verwirklichen; denke, diese Variante ist Anwender und Suchmaschinenfreundlicher:
    [….. Inhalt gelöscht, weil unrelevant, siehe unten]

    2. Kommentar von: nick77
    5. Januar 2006: 14:12

    und hier noch das ausgeschriebene html;-)
    html:
    <a href=“#“ class=“tipptext“>Linktext<span>Text der bei :hover als Tipptext angezeigt wird.</span></a>

    3. Kommentar von: Struppi
    5. Januar 2006: 15:24

    Jaja, ich weiß ich hab das hier schon demonstriert:
    http://jstruebig.de/web/javascript/exp/test/css-mouseover.html

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
    rats-wonderful
    rats-wonderful
    rats-wonderful
    rats-wonderful