Jan 11
DHTML Tooltips
Für Tooltips über HTML Elementen nutze ich gern das DHTML Tooltip Script von Mikko Mensonen. Der Vorteil ist, dass sich innerhalb des Tooltip beliebiger HTML Code befinden darf. Das Script lässt sich außerdem sehr einfach einbinden und anwenden.
Zunächst eine kurze Einführung:
Man fügt zuerst das Script im Seitenheader ein, zusammen mit einem Stylesheet, welches das Tooltip und dessen Inhalt formatiert, sowie die Ausgabe der Tooltip Texte auf der Seite verhindert:
<script src="toolTip.js" language="javascript" type="text/javascript"></script> <link href="tooltip.css" rel="Stylesheet" type="text/css" media="screen" />
tooltip.css sieht wie folgt aus:
.tooltip {
position:absolute;
display:none;
border:1px #000000 solid;
padding:5px;
width:350px;
z-index:2000;
}
.tooltipMouseover {
position:absolute;
display:block;
border:1px #000000 solid;
padding:5px;
width:350px;
z-index:2000;
top: -100px;
left: -500px;
}
Als nächstes werden die Tooltip Element innerhalb von <body> eingebunden:
<div class="tooltipsammlung"> <div class="tooltip" id="t_1"><b>Mein Tooltip</b><p>Dies ist mein Beispiel Tooltip</p></div> </div>
Es werden Elemente definiert (in unserem Fall ein Bild), die beim onmouseover Event einen Tooltip anzeigen und beim onmouseout Event den Tooltip wieder ausblenden sollen:
<a onmouseout="hideTooltip();" onmouseover="initTooltip('t_1');"><img src="images/qmbox.png" height="128" width="128" /></a>
Zuletzt wird noch diese Zeile vor dem schließenden body-Tag </body> eingebunden:
<div id="tooltipMouseover" class="tooltipMouseover"></div>
Und schon funktioniert das Tooltip!
Hier gibt es die benötigten Dateien:
Screenshot:
Januar 14th, 2008 at 12:12 am
[...] Im letzten Blogpost stellte ich das DHTML Tooltip Script vor. Ich wurde jedoch vor die Ausgabe gestellt, die Tooltip-Texte nicht mehr direkt in den Quelltext abzulegen, sodass sie von Suchmaschinen wie Google nicht ausgelesen werden können. Das bestehende Script wollte ich nicht anrühren, sondern ein eigenes Script (infobox.js) schreiben, welche die gewünschte Funktionalität realisiert. [...]