Como hacer un buen TOOLTIP text con javascript

1) Debemos crear un estilo para el tooltip:
<style type="text/css">
#toolTipBox {
       display: none;
       padding: 5;
       font-size: 12px;
       border: black solid 1px;
       font-family: verdana;
       position: absolute;
       background-color: #ffd038;
       color: 000000;
}
</style>
2) Luego tenemos el código de javascript:
<script type="text/javascript">  
var theObj="";  
function toolTip(text,me) {  
       theObj=me;  
       theObj.onmousemove=updatePos;  
       document.getElementById('toolTipBox').innerHTML=text;  
       document.getElementById('toolTipBox').style.display="block";  
       window.onscroll=updatePos;  
}  
function updatePos() {  
       var ev=arguments[0]?arguments[0]:event;  
       var x=ev.clientX;  
       var y=ev.clientY;  
       diffX=24;  
       diffY=0;  
       document.getElementById('toolTipBox').style.top  = y-2+diffY+document.body.scrollTop+ "px";  
       document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";  
       theObj.onmouseout=hideMe;  
}  
function hideMe() {  
       document.getElementById('toolTipBox').style.display="none";  
}  
</script>
3) Todo lo anterior, lo más apropiado es insertarlo dentro de la etiqueta . Una vez hecho esto unicamento nos resta utilizarlo en las imágenes que lo deseemos.
<div align="center">
<span id="toolTipBox" width="200"></span>
<img src="imagen001.jpg" width="237" height="197" border="0" onmouseover="toolTip('Mensaje que aparecera en el tooltip',this)"></div>