javascript - e.pageX 和 pageY 将工具提示放在奇怪的区域

Question

我一直在寻找一种让工具提示悬停在光标上方的方法，我看过很多建议使用事件 pageX 和 pageY 坐标如下:

const showToolTip = (evt, text) => {
  let tooltip = document.getElementById("tooltip");
  tooltip.innerHTML = text;
  console.log(evt)
  tooltip.style.visibility = "visible";
  tooltip.style.left = evt.pageX +'px';
  tooltip.style.top = evt.pageY + 'px';
}

但是，当我这样做时，工具提示通常位于鼠标右侧 400 像素和鼠标下方 300 像素处。

需要注意的是我在 SVG 上执行此操作:

<div id="tooltip" style="position: absolute; visibility: hidden;"></div>

<svg id="calendar" width="636px" height="84px"></svg>

....

// SVG is made up of several boxes and when one is hovered over the tooltip should appear: 
  box.addEventListener("mouseenter", (e) => {showToolTip(e, day)})
  box.addEventListener("mouseout", () => {hideToolTip()})
  svg.appendChild(box);
}

所有这些功能再次起作用，工具提示出现并四处移动，但它距离鼠标所在的位置非常远。我试图通过编写类似于 tooltip.style.left = (event.pageX - 300) + 'px' 的内容来抵消这一点，这种方法可以工作，但感觉很老套，有时在不同的尺寸下它也会这样做奇怪的事情。

Answer 1

确保您的工具提示不在relative 容器中，因为这将使绝对位置相对于该元素。