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
Muy bueno, gracias!
ResponderEliminar