JavaScript Tooltip
21. August 2008Mit diesem Skript lassen sich unterschiedliche Tooltips mittels JavaScipt realisieren, die individuell per xHTML und CSS gestaltet werden können.
Hier zum Test:
Test-Link
Anhand von diesem Beispiel wird eine einfache Möglichkeit beschrieben, um die “title”-Tags bei xHTML durch individuell gestaltete Tooltips zu ersetzen.
Man braucht lediglich dieses <div> – Element, welches irgendwo im <body> – Tag stehen muss
Und folgende CSS-Eigenschaften, die hier ergänzt wurden (Optional):
position:absolute;
display:none;
// Optional:
border:1px solid #AAA;
padding:3px;
background:#EEE;
color:#666;
font-size:12px;
}
Nun zum JavaScript. Die ersten 3 Zeilen sind Einstellungen – id des HTML-Elements und in Zeile 2 und 3 wird der Abstand des Tooltips zum Mauszeiger definiert. Der untere Teil kümmert sich um die Positionierung des Tooltips und sollte nicht verändert werden.
var abstandX = 15;
var abstandY = 15;
document.onmousemove = mousepos;
document.onscroll = scroll;
document.onmouseup = scroll;
function scroll() {
document.getElementById(id).style.display = "";
}
function mousepos(eventhandle) {
if(eventhandle) {
mouseposX = eventhandle.pageX;
mouseposY = eventhandle.pageY;
}
else if(window.event.clientX) {
mouseposX = document.documentElement.scrollLeft + window.event.clientX;
mouseposY = document.documentElement.scrollTop + window.event.clientY;
}
document.getElementById(id).style.left = mouseposX + abstandX + "px";
document.getElementById(id).style.top = mouseposY + abstandY + "px";
}
function tt_ein(jinfo) {
document.getElementById(id).innerHTML = jinfo;
document.getElementById(id).style.display = "block";
}
function tt_aus() {
document.getElementById(id).style.display = "none";
}
Zum Schluss noch der HTML-Code, der benötigt wird um den Tooltip ein- und auszublenden: