Javascript 确保一个图元与另一个图元有适当的偏移？

我不确定如何更好地表达上面的标题，所以如果你能想出一个更清晰、简洁的标题，请随意重新表达

---

我正在用HTML、CSS和Javascript（无jQuery、Angular等）创建一个通用工具提示。在我调整窗口大小并向下滚动之前，我已经做到了一切看起来都很干净的地步。现在，根据我的理解，移动设备没有

onmouseover

或

onmouseout

事件，因此我不需要对此进行解释；然而，如果我考虑到一些笔记本电脑较小的屏幕（我见过10英寸的屏幕），那么这可能是一个问题

当我将鼠标悬停在其中一个元素（在本例中，它们都是

a

元素）上时，工具提示将按其应有的方式显示，但是当我如上所述调整大小时，会触发

onmouseout

事件，因为从技术上讲鼠标位于工具提示上，而不再是该元素。我认为从元素的位置偏移它的高度加上五个像素，我可以避免这个问题，但是这个位置似乎不是我期望的位置

---

我目前正在使用

getBoundingClientRect（）

计算位置，但我相信这是基于视图端口位置的，而我认为我需要基于页面中的位置，而不是页面移动时工具提示所在的位置。我在下面包含了我的代码，您可以对其进行测试，看看我在说什么

var tooltip=document.getElementById（“globalTooltip”）；
函数显示工具提示（发送者）{
var senderBounds=sender.getBoundingClientRect（）；
var top=senderBounds.y+senderBounds.height+5；
tooltip.dataset.owner=发件人；
tooltip.innerHTML=sender.dataset.tooltip；
tooltip.classList.add（sender.dataset.tooltiptype）；
如果（顶部+工具提示.getBoundingClientRect（）.height+5>window.innerHeight）
top=senderBounds.y-tooltip.getBoundingClientRect（）.height-5；
tooltip.style.top=top+“px”；
tooltip.style.left=（senderBounds.x+5）+“px”；
添加（“活动工具提示”）；
}
函数hideTooltip（发送方）{
tooltip.style.left=“-250px”；
tooltip.classList.remove（“错误”）；
工具提示.classList.remove（“警告”）；
工具提示.classList.remove（“成功”）；
工具提示。类列表。删除（“中性”）；
tooltip.classList.remove（“活动工具提示”）；
}

正文{
保证金：0；
文本对齐：居中；
}
.禁用链接{
颜色：#777；
游标：默认值；
}
李{
填充物：5px；
列表样式类型：无；
}
.工具提示{
位置：绝对位置；
填充：10px；
游标：默认值；
边界半径：25px；
颜色：#333；
不透明度：0；
过渡：所有0.2秒缓进缓出；
最大宽度：30vw；
}
.neutral{背景色：#ddd；}
.success{背景色：#7c7；}
.警告{背景色：#fc3；}
.错误{背景色：#f55；}
.active工具提示{opacity:1；}

非常冗长的消息