Estoy tratando de crear un mapa SVG interactivo de Brisbane hecho de hexágonos. En cada hexágono, habrá datos que se mostrarán en una información sobre herramientas / ventana emergente que aparece cuando el usuario pasa el cursor sobre uno. Esta información sobre herramientas seguiría al mouse y simplemente se volvería visible u ocultaría dependiendo de si el mouse estaba flotando.

Mapa hexagonal con información sobre herramientas

Inicialmente estaba pensando en usar el selector :hover o un detector de eventos que se agregaba a cada hexágono. La cuestión es que todos los hexágonos están ligeramente separados, dejando un espacio de 5px entre ellos. Entonces, cuando el mouse se desplaza sobre un hexágono, aparece la información sobre herramientas, pero luego desaparece inmediatamente cuando se desplaza para mirar otro hexágono debido a la pequeña brecha en el medio. Realmente me gustaría que la información sobre herramientas se mantuviera uniforme cuando me muevo de un hexágono para mirar a otro, ya que parece demasiado errático en este momento.

También intenté verificar la distancia entre el mouse y cada hexágono y luego jugar mostrando la información sobre herramientas si la distancia era inferior a 50px. Esto funciona a veces dependiendo de la distancia a la que lo configuré, pero aún así no se ocultará correctamente.

 document.addEventListener("mousemove", function (e) { for (i = 0; i < poly.length; i++) { var pos = poly[i].getBoundingClientRect(); let _x = Math.round(pos.left + pos.width / 2); let _y = Math.round(pos.top + pos.height / 2); var mouseX = Math.round(e.clientX); var mouseY = Math.round(e.clientY); var a = _x - mouseX; var b = _y - mouseY; var dist = Math.round(Math.sqrt(a * a + b * b)); if (dist <= 50) { cursor.style.transform = "translatey(0%)"; // This is suppose to display the tooltip } } });

Creo que tengo un buen presentimiento de por qué esto probablemente no funciona, pero realmente no puedo expresarlo con palabras.

Aquí está el codepen actual . Lo siento por mi código desordenado e incomprensible y la palabra vómito, todavía soy un aficionado cuando se trata de todo esto.

Salud