I'm trying to create an interactive SVG map of Brisbane made up of hexagons. In each hexagon, there will be data that will be displayed on a tooltip / popup that appears when the user hovers over one. This tooltip would follow the mouse and simply become visible or hidden depending on whether the mouse was hovering.

Hexagon Map with tooltip

I was initially thinking about using either the :hover selector or an event listener that was added to every hexagon. Thing is though all the hexagons are spaced apart slightly, leaving like a 5px gap between them. So when the mouse hovers on one hexagon, the tooltip appears but then immediately disappears when hovering off to look at another one because of the small gap in-between. I would really like the tooltip to stay even when moving off one hexagon to look at another as it looks way too erratic at the moment.

I also tried checking the distance between the mouse and each hexagon and then playing displaying the the tooltip if the distance was less than 50px. This works sometimes depending on the distance I set it to, but it still wont hide properly.

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
    }
  }
});

I think I have a good feeling for why this is probs not working but I can't really put it to words.

Here's the current codepen. Sorry for my messyincomprehensible code and the word vomit, I'm still very much an amateur when it comes to all of this.

Cheers