Here is something similar I started sometime ago and never got round to finishing.
<HTML><HEAD><TITLE></TITLE>
<script>
//var Hmm
//var x,y
function show(view) {
Hmm=eval("document.all."+view+".style")
Hmm.visibility="visible"
followmouse()
}
function followmouse() {
Hmm.posLeft=x+10
Hmm.posTop=y
var timer=setTimeout("followmouse()",200)
}
function hide() {
Hmm.visibility="hidden"
}
function moveMe(){
x=document.body.scrollLeft+event.clientX
y=document.body.scrollTop+event.clientY
}
document.onmousemove=moveMe;
</script>
</HEAD>
<BODY>
<!--ONE-->
<table border=5 width=212><tr><td>
<p onMouseOver="show('one')" onMouseOut="hide()"><font color=red>Example One
<div id="one" style="position:absolute;visibility:hidden;z-index:1; border:2 dotted blue; background-color:green">ONE</div>
</td></tr></table>
<!--TWO-->
<table border=5 width=212><tr><td>
<a href="#null" onMouseOver="show('two')" onMouseOut="hide()">Example Two</a>
<div id="two" style="position:absolute;visibility:hidden;z-index:2; background-color:yellow"><b>TWO</b></div>
</td></tr></table>
<!--THREE-->
<table border=5 width=212><tr><td>
<a href="#null" onMouseOver="show('three')" onMouseOut="hide()">Example Three</a>
<div id="three" style="position:absolute;visibility:hidden;z-index:3; background-color:red">
<table width=200 height=260 bgcolor=FFFFFF cellpadding=5><tr valign=top><td bgcolor=FFFF88>THREE
</td></tr></table></div>
</td></tr></table>
<!--FOUR-->
<table border=5 width=212>
<tr><td><a href="#null" onMouseOver="show('four')" onMouseOut="hide()">Example Four</a>
<div id="four" style="position:absolute;visibility:hidden;z-index:4; background-color:blue">
<table width=160 height=220 cellpadding=5 border=3 bordercolor=red><tr valign=top>
<td bgcolor="0000AA"><font color="FFFFFF">FOUR</td></tr></table>
</div>
</td></tr></table>
</BODY></HTML>
Feel free to play around with it