必须用 relative 祖先+坐标转换，因 clientX/Y 相对视口而 absolute 参考最近定位祖先；移动端需监听 touchmove 并取 touches[0] 坐标，否则静默失效。
为什么 position: absolute 配合鼠标事件容易错位
直接用 event.clientX / event.clientY 给 left 和 top 赋值，常导致提示框偏移——因为这些坐标是相对于视口的，而 absolute 元素的定位参考点是其最近的 position: relative/absolute/fixed 祖先。若祖先没设定位，就退到 <html>，但滚动后 clientX/Y 不变，视觉上就“粘不住”鼠标了。
实操建议：
- 给提示框的父容器（比如触发它的按钮或卡片）加上
position: relative - 监听
mousemove时，用getBoundingClientRect()计算父容器位置，再把鼠标坐标转为相对父容器的偏移 - 避免直接用
pageX/pageY，它包含滚动距离，在缩放或 iframe 场景下更不稳定
如何用 JavaScript 动态更新 style.left 和 style.top
不要操作 style 属性去拼字符串，也不要用 setAttribute('style', ...) —— 容易覆盖已有内联样式。直接赋值给 element.style.left 最稳妥。
关键细节：
立即学习“前端免费学习笔记（深入）”；
- 数值必须带单位，比如
tip.style.left = (x + 10) + 'px'，漏掉'px'会失效 - 建议加小偏移（如
+10、+8），避免提示框遮住鼠标指针 - 在
mousemove中频繁设置样式可能触发重排，可加requestAnimationFrame节流
示例片段：
element.addEventListener('mousemove', (e) => {
requestAnimationFrame(() => {
const rect = element.getBoundingClientRect();
const x = e.clientX - rect.left + 10;
const y = e.clientY - rect.top + 10;
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
});
});提示框被裁剪或显示不全怎么办
常见原因是父容器设置了 overflow: hidden，或者提示框的 z-index 不够高，被其他层盖住。
排查和修复要点：
- 检查提示框所有上级元素，尤其是直接父容器，确认没有
overflow: hidden或clip-path -
tooltip自身需设position: absolute且z-index明确（如z-index: 1000） - 如果父容器是
transform触发的层叠上下文（比如用了scale或translateZ），z-index可能失效，此时要把提示框挂到document.body下
移动端适配要注意什么
移动端没有持续的 mousemove，只有 touchmove，而且触摸点坐标在 event.touches[0] 里，不是 clientX。
兼容写法要点：
- 同时监听
mousemove和touchmove，从event.touches?.[0] || event取坐标 - 触摸场景下，提示框不宜太小，
font-size和padding建议 ≥14px - 部分 iOS Safari 在
touchmove中阻止默认行为会影响滚动，别无脑e.preventDefault()
实际中最容易被忽略的是容器定位上下文和移动端事件源切换——这两个点一错，整个跟随逻辑就静默失效，连控制台都不报错。
