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