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容器中，因为这将使相对于该元素的绝对位置。