JavaScript: crear ToolTip con la posición del ratón

En el siguiente tutorial JavaScript vamos a crear un tooltip. Para ver como nos quedará, pasa el ratón por encima del siguiente div azul:

Código:

 <style> .div_azul {
 width: 300px;
 height: 100px;
 background-color: #a8ccea;
 }

 #cuadro {
 display: none; background-color: #188acb;
 color: #fff;
 position: absolute;
 padding: 5px;
 } </style>

<div id="midiv" class="div_azul"></div>

<script type="text/javascript">
 var div1 = document.getElementById('midiv');
 div1.onmousemove = posicion;

 function posicion(posicion) {
 var cuadro = document.getElementById("cuadro");
 cuadro.style.display = "table";
 cuadro.innerHTML = "eje x:" + posicion.screenX + " - eje y:" + posicion.screenY;
 cuadro.style.left = posicion.clientX + "px";
 cuadro.style.top = posicion.clientY - 20 + "px";
 }
</script>

<div id="cuadro"></div>

 Explicación del código: En la parte de HTML, he creado un dos div. Uno azul para que cuando estemos encima de él nos muestre el tooltip y otro, en un principio oculto, que será donde aparecen los datos de la posición del ratón.

 Cuando estemos encima del div azul se llamará a la funcion posicion y en ella haremos visible nuestro segundo div insertándole la posición del ratón en el eje de las x y de las y gracias a .screenX y .screenY. Haremos que este div siga al ratón con .clientX y .clientY