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)
    274 mal gelesen.

    3 Kommentare

    Leave a comment »

    Seiten:

    1. Comment von: nick77
    5. January 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. Comment von: nick77
    5. January 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. Comment von: Struppi
    5. January 2006: 15:24

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

    Leave a comment

    Name (required)
    Mail (wird nicht angezeigt) (required)
    Website

    Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
    rats-wonderful
    rats-wonderful
    rats-wonderful
    rats-wonderful