Java(-Script) Workshops -> Advanced Tooltip

Sicherlich haben viele von euch schon mal gesehen, dass auf Webseiten, wenn man mit der Maus über Links geht, erweiterte Informationen angezeigt werden. Dies ist allerdings keine Standard-HTML-Funktion. Man kann zwar mit <a href="datei.html" title="Windows-Tooltip">...</a> einen normalen, gelben Windows-Tooltip anzeigen lassen, allerdings hat man bei diesem nur sehr beschränkte Formatierungs-möglichkeiten und man ist auch auf eine Zeile beschränkt.

Mit diesem Workshop erkläre ich, wie man das selbst programmieren kann. Das ganze sieht am Ende so aus.
Dabei kann allerdings die gesamte Formatierung noch geändert werden, da alles CSS-formatiert ist.

Das Script sieht wie folgt aus:
<!-- Advanced Tooltip v2.1 by Triple-M -->
<script type="text/javascript">
<!--

var mousex=0;
var mousey=0;

function displaytooltip (name) {
document.getElementById(name).style.left=(mousex+4)+"px";
document.getElementById(name).style.top=(mousey+4)+"px";
document.getElementById(name).style.display="inline"; //Tooltip anzeigen
return;
}

function hidetooltip (name) {
document.getElementById(name).style.display="none";
return;
}

function capturemaus(nsevent) {
if(window.event) {
mousex=window.event.x;
mousey=window.event.y;
}
else {
mousex=nsevent.pageX;
mousey=nsevent.pageY;
}
}

document.onmousemove=capturemaus;


//-->
</script>

Man hat hier drei Funktionen, nämlich
displaytooltip(ID des Objektes)
und
hidetooltip(ID des Objektes)

displaytooltip() zeigt dabei einen vorher als Tag definierten Tooltip an der Mausposition an. hidetooltip() versteckt ihn wieder. Dabei verwende ich jeweils die JavaScript-Funktion document.getElementById() um ein HTML-Elementobjekt zu erstellen. Mittels der CSS-Style-Attribute, die unter dem Unterobjekt style zur verfügung stehen, wird der Tooltip dann angezeigt.
Damit das ganze in der Nähe des Mauszeigers angezeigt wird, verwende ich die Event-Überwachung mittels document.onmousemove. In der aufgerufenen Funktion capturemaus werden dabei die Variablen mousex und mousey auf die aktuelle Position des Mauszeigers gesetzt. In der Funktion showtooltip werden diese dann weiter verarbeitet.
Für den Aufruf empfehle ich etwa den folgenden Quelltext:


<a href="test.html" onMouseOver="displaytooltip('tooltip0')" onMouseOut="hidetooltip('tooltip0')">Test01</a>
<a href="test.html" onMouseOver="displaytooltip('tooltip1')" onMouseOut="hidetooltip('tooltip1')">Test02</a>

<!-- Hier folgen die vordefinierten Tooltips -->

<div class="atooltip" id="tooltip0"><b>TOOLTIP</b><br>Nr.1</div>
<div class="atooltip" id="tooltip1"><b>TOOLTIP</b><br>Nr.2</div>

Im ersten Teil werden die Links (oder anderen Tags) geschrieben, die mit den Tooltips genauer beschrieben werden sollen. Wichtig ist dabei natürlich das onMouseOver="displaytooltip('tooltip0')" und das onMouseOut="hidetooltip('tooltip0'). Der Wert in den Klammern gibt dabei die ID des zu zeigenden HTML-Elementobjektes an.

Im zweiten Teil werden die HTML-Elementobjekte dann definiert. Ich arbeite dabei immer mit dem <DIV>-Tag. Innerhalb des Tags kann man dann mit HTML-Formatierung, Bildern etc. arbeiten.

Was ganz wichtig ist, damit das ganze klappt: Im Stylesheet (Also im Bereich <style type="text/css"> ... </style> oder einer über <link rel="stylesheet" href="datei.css" type="text/css"> separat eingebundenen Datei) sollte folgende oder ähnliche Definition stehen:

.atooltip {
display:none;
position:absolute;
left:0px;
top:0px;
border:1px solid #8080ff;
background-color:#404040;
color:#ffffff;
}

display:none ist wichtig, damit der Tooltip nicht von Anfang an gezeigt wird. position:absolute sagt dem Browser, dass das Tag nicht im Text steht, sondern absolut positioniert wird, left und top setze ich am anfang auf die linke obere ecke (das ist allerdings nicht zwingend notwendig) und die anderen Attribute ändern nur die Farbe und den Rahmen, die können beliebig angepasst oder weggelassen werden.

Das Script ist im IE 5 & 6, Mozilla 1.2.1, Netscape 7.02 und Opera 7.10 getestet und klappt.