用 transform: translate() + getboundingclientrect() 是最稳妥方案，因不触发重排且避免鼠标事件干扰；而 left/top 会强制同步布局计算，导致高频 mousemove 下卡顿，并在父容器有 transform 或气泡遮挡时失效。
直接用 pointer-events: none + transform 位移是最稳妥的方案，避免重排（reflow）和鼠标事件干扰。
为什么不能直接用 left/top 动态赋值？
每次鼠标移动都触发 style.left 和 style.top 修改，会强制浏览器同步计算布局（layout），在高频 mousemove 下极易卡顿。尤其当气泡内有文字、边框或阴影时，开销更大。
- 浏览器需反复读取视口尺寸、滚动偏移、元素尺寸来换算绝对坐标
- 若气泡父容器有
transform或perspective，left/top坐标会失效或错位 - 气泡遮挡目标元素后，
mousemove可能中断（除非加pointer-events: none）
推荐做法：用 transform: translate() + getBoundingClientRect()
只改 transform 不触发 layout，性能好；配合 getBoundingClientRect() 获取鼠标相对于视口的精确位置，再减去气泡自身宽高的一半，实现居中跟随。
- 监听
mousemove，用event.clientX/event.clientY获取视口坐标 - 用
tooltipEl.getBoundingClientRect()拿到气泡当前尺寸（注意：首次获取前需确保已渲染且非display: none） - 设置
transform: translate(${x}px, ${y}px)，其中x = clientX - tooltipWidth / 2，y = clientY - tooltipHeight / 2 - 务必给气泡加
pointer-events: none，否则鼠标移上去就丢事件
tooltipEl.style.transform = `translate(${clientX - w/2}px, ${clientY - h/2}px)`;
边界检测：别让气泡跑出可视区
不做限制的话，气泡会在鼠标靠近边缘时一半消失。需要根据 window.innerWidth / window.innerHeight 和气泡尺寸动态修正 translate 值。
- 左边界：
Math.max(0, clientX - w/2)→ 改为Math.max(w/2, clientX)更准（因为 translate 是基于左上角） - 右边界：
Math.min(window.innerWidth - w, clientX - w/2) - 同理处理上下，用
window.innerHeight和h - 建议用
Math.min(Math.max(...), ...)一行写完，避免 if 分支影响帧率
真正难的是气泡尺寸动态变化（比如内容从“加载中”变成“完成”），此时 getBoundingClientRect() 必须在每次 render 后立即读取，且不能依赖缓存 —— 很多人在这里漏掉重测，导致位置偏移一两个像素，肉眼明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
