Tooltip personalizado con javascript

Vamos a crear un tooltip o alt o title como querais llamarlo personalizado de forma que cuando el ratón se mueva por el sitio donde quieras que salga saldrá.

Primeramente tendremos un DIV que simule un tooltip con el estilo que deseeis y ponerlo oculto:

<div id="tooltip" class="tooltipestilo"></div>

Su estilo (css) es:

.tooltipestilo{filter: alpha(opacity=77);background-color:#eeccee;width:140px;height:30px;border:solid 2px white;font-size: 11px;position:absolute;visibility:hidden}


A continuación la etiqueta donde salga el tooltip al moverse en él con el ratón:

<a onmousemove="showdiv(event)">http://dudasweb.blogspot.com</a>

Por último la función javascript:

function showdiv(event)
{
//determina un margen de pixels del div al raton
margin=5;

//La variable IE determina si estamos utilizando IE
var IE = document.all?true:false;

var tempX = 0;
var tempY = 0;

if(IE)
{ //para IE
tempX = event.x
tempY = event.y
if(window.pageYOffset){
tempY=(tempY+window.pageYOffset);
tempX=(tempX+window.pageXOffset);
}else{
tempY=(tempY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
tempX=(tempX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));
}
}else{ //para netscape
tempX = event.pageX;
tempY = event.pageY;
}

if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}

document.getElementById('tooltip').style.top = (tempY+margin)+"px";
document.getElementById('tooltip').style.left = (tempX+margin)+"px";
document.getElementById('tooltip').style.display='block';
return;
}