tooltip定位需用getboundingclientrect()获取视口坐标并结合css偏移计算，而非offsetleft/top；常见错位因忽略滚动或参照系错误；移动端应优先用touchstart并加遮罩防误触。
气泡提示框（tooltip）的定位不是靠“自动居中”或“随便放”，而是由触发元素的位置 + CSS 偏移量共同决定；零基础直接抄代码大概率错位，关键在理解 getBoundingClientRect() 返回值和 position: absolute 的参照系。
为什么 tooltip 总是偏左/偏上一截？
常见现象：鼠标悬停后，气泡出现在触发按钮左上方、甚至跑到屏幕外。根本原因是没正确读取触发元素的位置，或忽略了 offsetParent 和滚动容器的影响。
- 用
element.offsetLeft/offsetTop获取位置时，返回的是相对于最近的position: relative/absolute/fixed父元素的偏移，不是视口坐标 —— 多数情况下这会出错 - 正确做法是用
element.getBoundingClientRect()，它返回的是相对于当前视口（viewport）的top、left、width、height - 如果页面有滚动，
getBoundingClientRect()仍有效；但若 tooltip 要固定在触发点附近（比如顶部居中），需额外加上window.scrollY和window.scrollX才能适配滚动后的位置（不过现代 tooltip 多用position: fixed，可跳过此步）
HTML + CSS 实现最简可定位 tooltip
不依赖 JS 也能做基础 tooltip，但定位能力弱（只能基于伪元素 + :hover，且无法动态计算方向）。真正可控的定位必须靠 JS 计算 + 动态设置 style.left / style.top。
- HTML 结构保持简洁：
<button data-tooltip="保存成功">保存</button>，把提示文本存在data-属性里 - CSS 中 tooltip 元素初始设为
display: none，并用position: fixed（避免被父级overflow: hidden截断） - JS 绑定
mouseenter事件，在回调里调用triggerEl.getBoundingClientRect()，再根据气泡宽高反向计算 left/top - 例如顶部居中显示：
tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px'；tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + 'px'
用 getBoundingClientRect() 计算不同方向的 offset
同一个触发元素，可以按需把 tooltip 放在上方、下方、左侧或右侧 —— 差别只在四组计算公式，没有魔法。
- 上方（top）：
top = rect.top - tooltip.offsetHeight - 6，left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 - 下方（bottom）：
top = rect.bottom + 6，left = 同上 - 右侧（right）：
left = rect.right + 6，top = rect.top + rect.height / 2 - tooltip.offsetHeight / 2 - 左侧（left）：
left = rect.left - tooltip.offsetWidth - 6，top = 同上 - 所有数值中的
6是间距，可根据设计调整；注意tooltip.offsetWidth必须在元素已渲染（display: block）后读取，否则为 0 —— 建议先tooltip.style.display = 'block'，再offsetWidth，再设left/top
移动端 click 触发 tooltip 容易失效？
在 iOS 或部分安卓浏览器中，mouseenter 不触发，click 又会导致快速闪退 —— 根本原因是 tooltip 显示后，手指点击区域变化，可能立刻触发 mouseleave 或误点空白处关闭。
- 解决办法：改用
click+ 手动开关 + 延迟隐藏（如setTimeout配合mouseleave） - 更稳妥方案：加一个半透明遮罩层（
pointer-events: none）盖在 tooltip 下方，防止误触；或者干脆放弃 hover/click 混用，统一用click并手动控制显隐状态 - 别忘了加
touchstart事件监听，iOS Safari 对click有 300ms 延迟，touchstart更及时
真正卡住初学者的，从来不是写不出第一行 tooltip.style.left，而是不知道该用哪个坐标、什么时候读 offsetWidth、以及为什么加了 position: relative 父容器后整个 tooltip 就乱套了 —— 这些细节不试错几遍，光看教程没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
