直接用top/left写死定位会失效，因Tooltip需响应鼠标位置、元素尺寸变化或滚动，硬编码值无法动态适配；必须由JS结合getBoundingClientRect()和scroll偏移实时更新CSS变量，再通过calc()或transform消费。
为什么直接用 top/left 写死定位会失效
Tooltip 经常要响应鼠标位置、元素尺寸变化或滚动，硬编码 top 和 left 值会导致提示框错位。CSS 变量本身不触发重排，但配合 calc() 和 JS 动态更新变量值，就能让定位真正“动态”——关键不是变量多酷，而是它得被 JS 及时改。
常见错误现象：top: var(--tooltip-top, 0px) 写了，但 JS 忘记在 mousemove 或 scroll 里更新 --tooltip-top，结果还是静止的；或者用了 getBoundingClientRect() 却没减去滚动偏移，一滚动就飘走。
- 必须用
element.style.setProperty('--tooltip-top', y + 'px')更新，不能靠 class 切换预设值 - 计算坐标时，优先用
clientX/clientY（视口坐标），再通过getBoundingClientRect()换算到目标元素相对位置 - 若 Tooltip 是 fixed 定位，
top/left直接用视口坐标；若是 absolute，则需减去父容器 offset
transform: translate() 比 top/left 更稳
用 top/left 触发 layout，而 transform 只走合成层，动画更顺，也避免因父容器 overflow: hidden 裁剪 Tooltip。CSS 变量配合 translate() 是更推荐的组合。
示例结构：
div.tooltip {
position: fixed;
transform: translate(var(--tx, 0), var(--ty, 0));
transition: transform 0.15s cubic-bezier(0.2, 0.7, 0.4, 1);
}
JS 更新时只设两个变量：
el.style.setProperty('--tx', (x - offsetX) + 'px')el.style.setProperty('--ty', (y - offsetY) + 'px')- offsetX/Y 是 Tooltip 自身宽高的一半（居中对齐）或箭头偏移量
如何让 Tooltip 自动避开视口边缘
纯 CSS 无法判断边界，必须 JS 计算。核心逻辑：拿到目标坐标后，检查 x/y 加 Tooltip 尺寸是否超出 window.innerWidth 或 window.innerHeight，再修正变量值。
容易踩的坑：
- 用
document.documentElement.clientWidth而非window.innerWidth—— 后者含滚动条宽度，PC 端可能偏差 16px - 修正时别直接覆盖原变量，先缓存原始值，再按需调整：
const safeX = Math.max(8, Math.min(x - tooltipWidth / 2, innerWidth - tooltipWidth - 8)) - 如果 Tooltip 有
max-width或字体缩放，务必用getBoundingClientRect()实测宽高，别信 CSS 预设值
移动端 touchstart/touchmove 的特殊处理
移动端没有 mousemove，且 touches[0] 的坐标是相对于视口的，但部分安卓 WebView 会把地址栏高度算进 clientY，导致 Tooltip 浮在半空。
实操建议：
- 监听
touchstart和touchmove，取touches[0].clientX和touches[0].clientY - 加防抖：300ms 内重复 touch 不重复设变量，避免卡顿
- 首次 touch 后立即调用
window.scrollTo(0, 0)强制收起地址栏（仅 iOS Safari 有效），再读clientY - 不要依赖
pageX/pageY—— 它受滚动影响，fixed 定位下反而不准
CSS 变量本身不“动态”，动态性全靠 JS 在恰当时机、用恰当坐标、设恰当变量值。最常被忽略的是：每次更新前没清空上一次的 transform 或没重算 Tooltip 实际尺寸，导致越移越偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
