窗口水平缩小时鼠标跟随Tooltip偏移远离鼠标的问题排查

问题背景 #

• 近期重构站点Tooltip代码，原有实现使用offsetX/Y获取鼠标坐标存在随父元素偏移的问题，重构后单页面仅保留1个Tooltip元素挂载在主div下，根据鼠标悬停的目标元素动态传入展示文本。
• 现存异常：仅水平方向出现定位偏移，浏览器窗口宽度越小，Tooltip距离鼠标指针的水平距离越远，最终会完全移出视口不可见，Y轴定位无异常。
• 已尝试的排查方案均未解决问题：
  • 将鼠标坐标获取逻辑从pageX/Y替换为clientX/Y，偏移问题仍存在
  • 使用offset相关属性获取坐标会回到最初的随悬停目标偏移的问题
  • 调整Tooltip的position定位属性、同步调整父元素尺寸避免元素被挤压，问题没有改善
• 环境补充：带有notfound类的body元素尺寸为900px高、600px宽；Tooltip当前挂载在一个宽高1px、设置了position: relative的div容器下，经开发者工具检查该容器不会随窗口尺寸变化发生位移。

现有问题实现代码 #

JavaScript逻辑 #

var body = document.getElementsByClassName("test");
var tooltip = document.getElementById("tooltip");
body[0].addEventListener("mousemove", tooltipMove)

function tooltipMove(event) {
  var x = event.pageX;
  var y = event.pageY;
  // 硬编码的超大负偏移是核心诱因
  tooltip.style.top = (y + -900) + "px";
  tooltip.style.left = (x + -875) + "px";
}

CSS样式 #

.tooltip {
    visibility: hidden;
    width: 170px;
    background-color: white;
    background-image: url("images/tooltipbackground.png");
    color: black;
    text-align: center;
    border-style: groove;
    border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c;
    border-radius: 2px;
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
}

.notfound:hover .tooltip {
    visibility: visible;
}

HTML结构 #

<div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;">
  <h1>TEST</h1>
  <img src="images/pagenotfound.png">
</div>

<div style="width: 1px; height: 1px; position: relative;">
  <span class="tooltip" id="tooltip">testing</span>
</div>

问题根因 #

1. 定位参考系不匹配：当前Tooltip设置position: absolute，定位原点是最近的带定位属性的父元素——也就是那个1px宽高的relative容器的左上角；但代码里传入的pageX/Y是相对于整个文档左上角的坐标，两个参考系原点本身不重合，硬编码的-875、-900偏移量只是凑了全屏窗口下的位置差值，一旦窗口缩放触发页面水平内容流位移，参考系的差值发生变化，水平偏移就会出现。
2. 硬编码偏移无逻辑支撑：-875、-900的数值是试出来的凑数结果，没有和定位参考系做绑定，窗口尺寸变化后凑出来的差值自然失效。
3. Y轴暂时无偏移只是巧合：当前Y轴方向页面没有随窗口缩放产生位移差，一旦页面出现垂直滚动，Y轴定位一样会出现偏移问题。

修复方案 #

1. 统一定位参考系：删掉用来装Tooltip的1px宽高的多余relative容器，把Tooltip直接挂载到<body>标签下，将Tooltip的position属性改为fixed，此时定位原点固定为视口左上角，直接用clientX/clientY计算坐标即可，完全不受父元素、页面滚动影响。
2. 去掉硬编码的超大负偏移，改成常规的鼠标跟随偏移量（比如鼠标右下方12px位置，避免遮挡鼠标指针）。
3. 补充视口边界判断，避免Tooltip溢出视口不可见。

修复后参考代码 #

调整后HTML

<div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;">
  <h1>TEST</h1>
  <img src="images/pagenotfound.png">
</div>
<!-- 直接把Tooltip放到body末尾，去掉外层多余容器 -->
<span class="tooltip" id="tooltip">testing</span>

调整后CSS

.tooltip {
    visibility: hidden;
    width: 170px;
    background-color: white;
    background-image: url("images/tooltipbackground.png");
    color: black;
    text-align: center;
    border-style: groove;
    border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c;
    border-radius: 2px;
    padding: 5px 5px;
    /* 改为fixed定位，参考系固定为视口 */
    position: fixed;
    z-index: 9999;
    /* 避免Tooltip遮挡鼠标事件 */
    pointer-events: none;
}

.notfound:hover .tooltip {
    visibility: visible;
}

调整后JavaScript

var tooltipArea = document.getElementsByClassName("test")[0];
var tooltip = document.getElementById("tooltip");
// 预定义Tooltip尺寸、鼠标偏移量，可根据实际渲染效果调整
const tooltipWidth = 180; // 170px宽度 + 左右各5px内边距
const tooltipHeight = 32; 
const mouseOffset = 12; // Tooltip距离鼠标指针的间距

tooltipArea.addEventListener("mousemove", tooltipMove)

function tooltipMove(event) {
  let x = event.clientX;
  let y = event.clientY;

  // 右边界判断：如果放鼠标右侧会溢出视口，就改为显示在鼠标左侧
  if (x + mouseOffset + tooltipWidth > window.innerWidth) {
    x = x - mouseOffset - tooltipWidth;
  } else {
    x = x + mouseOffset;
  }
  // 下边界判断：如果放鼠标下侧会溢出视口，就改为显示在鼠标上侧
  if (y + mouseOffset + tooltipHeight > window.innerHeight) {
    y = y - mouseOffset - tooltipHeight;
  } else {
    y = y + mouseOffset;
  }

  tooltip.style.top = `${y}px`;
  tooltip.style.left = `${x}px`;
}

内容的提问来源于stack exchange，提问作者Killbent