Acabo de renovar mi código de información sobre herramientas debido a problemas con la alteración de la posición según el tamaño de su padre (principalmente debido al uso de offsetX/Y en lugar de pageX/Y, pero la página también estaba siendo extraña). Así que decidí tener solo una información sobre herramientas para cada una de las páginas de mi sitio, vinculada al div principal, y simplemente alimentarlo con un texto diferente dependiendo de sobre qué esté pasando el mouse (me ocuparé de la parte de visibilidad más adelante).

Y ha funcionado bastante bien hasta ahora, pero el único problema es que, cuanto más pequeña hago mi ventana, más lejos está la información sobre herramientas de mi mouse, hasta que ya no está a la vista.

Aquí está la codificación de JavaScript que he hecho para ello.

 var body = document.getElementsByClassName("test"); var tooltip = document.getElementById("tooltip"); body[0].addEventListener("mousemove", tooltipMove) function tooltipMove(event) { var x = event.pageX; var y = event.pageY; tooltip.style.top = (y + -900) + "px"; tooltip.style.left = (x + -875) + "px"; }

La codificación CSS para la información sobre herramientas:

 .tooltip { visibility: hidden; width: 170px; background-color: white; background-image: url("images/tooltipbackground.png"); color: black; text-align: center; border-style: groove; border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c; border-radius: 2px; padding: 5px 5px; position: absolute; z-index: 1; } .notfound:hover .tooltip { visibility: visible; }

Y el HTML:

 <div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;"> <h1>TEST</h1> <img src="images/pagenotfound.png"> </div> <div style="width: 1px; height: 1px; position: relative;"> <span class="tooltip" id="tooltip">testing</span> </div>

Debo mencionar que la altura del cuerpo (que tiene la clase "notfound") es de 900 px y su ancho de 600 px, en caso de que ese sea uno de los problemas.

El div de 1 píxel es justo lo que estoy usando para "alojar" la información sobre herramientas, no estoy seguro de si también está causando algún problema. Inspeccioné la página para verla, y nunca pareció deslizarse con el tamaño de la ventana.

Cualquier tipo de ayuda sería muy apreciada. Intenté cambiarlo de pageX/Y a clientX/Y, pero es el mismo problema. Y el uso de desplazamiento hace que su posición cambie dependiendo de lo que esté pasando, que es la razón por la que estoy renovando el código en primer lugar.

También intenté cambiar la posición de la información sobre herramientas de absoluta a, bueno, cualquier otra cosa (después de cambiar el tamaño de su padre para que no se aplaste), pero eso no ha ayudado.

Otra cosa que debo mencionar es que, por alguna razón, el cambio no parece ocurrir en el eje Y, es solo cuando aplasto la ventana horizontalmente que la información sobre herramientas cambia, al menos por lo que he notado.