<html>
<head>
<script type="text/javascript">
<!--
var PageX, PageY;
var OffsetX = 10;
var OffsetY = 10;
function setCoords(Event)
{
PageX = Event.pageX;
PageY = Event.pageY;
}
function tooltip(id)
{
with(document.getElementById(id).style)
{
if(visibility == "visible")
visibility = "hidden";
else
{
if(document.defaultCharset)
{
left = event.clientX + OffsetX;
top = event.clientY + OffsetY;
}
else
{
document.onmousemove = setCoords;
left = PageX + OffsetX;
top = PageY + OffsetY;
}
visibility = "visible";
}
}
}
//-->
</script>
<style type="text/css">
<!--
.tooltip { position: absolute;
border: 1px solid;
background-color: #ccf; }
-->
</style>
</head>
<body>
<div id="tt1" class="tooltip" style="visibility: hidden;">Ich bin ein Tooltip!</div>
<div id="tt2" class="tooltip" style="visibility: hidden;">Ich auch!</div>
<div id="tt3" class="tooltip" style="visibility: hidden;">Na, und ich erst!</div>
<div id="tt4" class="tooltip" style="visibility: hidden;">...</div>
<a href="#" onmouseover="tooltip('tt1');" onmouseout="tooltip('tt1');">Klick!</a><br />
<a href="#" onmouseover="tooltip('tt2');" onmouseout="tooltip('tt2');">Klick!</a><br />
<a href="#" onmouseover="tooltip('tt3');" onmouseout="tooltip('tt3');">Klick!</a><br />
<a href="#" onmouseover="tooltip('tt4');" onmouseout="tooltip('tt4');">Klick!</a>
</body>
</html>
