因为position: absolute的tooltip会相对于最近已定位祖先定位，若父容器未设position: relative，它将上溯至body或意外祖先导致错位；必须为直接父元素显式设置position: relative以建立可靠定位上下文。
为什么 position: absolute 单独用在 tooltip 上会错位？
因为 absolute 定位是相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的父级）计算偏移的。如果 tooltip 的父容器没设 position: relative，它就会往上一直找，最终可能相对于 body 或某个意外的布局容器定位，导致气泡飘走。
实操建议：
- 给 tooltip 的直接父元素（通常是触发按钮或图标）加上
position: relative - tooltip 元素自身设为
position: absolute，再用top/left或transform微调位置 - 避免把 tooltip 插在 DOM 深层嵌套里——层级越深，越容易被中间某个「无意中加了
position」的祖先干扰
怎么让 tooltip 真正“跟随”鼠标或元素边缘？
纯 CSS 无法读取鼠标坐标，所以“跟随鼠标”必须靠 JavaScript 计算位置；但“贴着目标元素某一边显示”（比如上/下/左/右）完全可用 CSS 实现，关键是合理组合 top、left、transform 和 margin。
常见做法：
- 上方位 tooltip：设
bottom: 100%+left: 50%+transform: translateX(-50%)，比写死top更鲁棒 - 右侧 tooltip：用
left: 100%+top: 50%+transform: translateY(-50%) - 加
margin控制气泡与目标间的间距（如margin-bottom: 8px），别只依赖top数值硬调 - 若需动态方向（自动避开视口边缘），必须 JS 测量
getBoundingClientRect()后切换 class
z-index 不生效？多半是堆叠上下文搞错了
tooltip 被遮挡，常不是 z-index 值不够大，而是它和遮挡它的元素不在同一个堆叠上下文里。比如父容器有 transform、opacity 或 <code>will-change，会创建新层叠上下文，导致子元素的 z-index 只在该上下文内生效。
排查重点：
- 检查 tooltip 父级是否意外触发了新堆叠上下文（用浏览器 DevTools 的「Layers」面板可验证）
- 确保 tooltip 和目标元素的共同祖先没有不必要的
transform或opacity -
z-index只对position非static的元素有效——确认 tooltip 本身不是static
移动端点击触发 tooltip 时，为什么点一下就消失？
因为移动端没有稳定的 :hover，且 click 触发后焦点可能快速丢失，导致基于 :focus 或 :hover 的纯 CSS tooltip 瞬间收起。
可靠方案：
- 放弃纯 CSS，用 JS 控制
show/hideclass 切换，并加pointer-events: none防止遮挡底层操作 - 若坚持用 CSS，可用
:focus-within（兼容性 OK，iOS Safari 15.4+ 支持）配合tabindex="0"让按钮可聚焦 - 务必加
touch-action: manipulation到触发元素，减少 iOS 点击延迟
真正难的不是写出一个能动的 tooltip，而是让它在各种缩放、滚动、多屏、暗色模式下都不偏不遮不闪——这些细节几乎全要靠 JS 补位，CSS 只负责“长什么样”和“基础定位”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
