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
Browser
ähnliche Artikel
2618 mal gelesen.
3 Kommentare
direkt zum Formular »
Seiten:
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]
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>
5. Januar 2006: 15:24
Jaja, ich weiß ich hab das hier schon demonstriert:
http://jstruebig.de/web/javascript/exp/test/css-mouseover.html