纯CSS Tooltip在现代项目中基本不可靠，因其不响应滚动、不支持键盘焦点、iOS Safari hover失效、内容超长时排版失控；它仅适用于静态页、内部后台或原型演示，根本原因在于浏览器能力边界而非实现难度。
纯CSS Tooltip在现代项目里基本不可靠，除非你明确接受它的硬性限制：不响应滚动、不支持键盘焦点、iOS Safari上 hover 失效、内容超长时排版失控。它只适合静态页面、内部管理后台或原型演示——不是因为写法难，而是浏览器能力边界决定的。
为什么position: absolute + ::after 定位会错位？
核心问题不是代码写错了，而是定位上下文被意外切断。常见原因有：
-
position: relative没加在触发元素上，导致::after相对于body定位 - 触发元素父级用了
transform、perspective或will-change，这会创建新的包含块，让top/left基准偏移 - 父容器设了
overflow: hidden或clip-path，直接裁掉绝对定位子元素（z-index无效） - 用
left: calc(50% - 60px)算宽度，但提示文字长度动态变化，60px 就不准了
正确做法是统一用 transform: translateX(-50%) 居中，不依赖固定宽值。
z-index 不生效？先检查position是否为static
z-index 只对已定位元素起作用。很多人写了 z-index: 999 却没配 position: absolute 或 relative，结果 tooltip 被 modal 或 header 盖住。
立即学习“前端免费学习笔记（深入）”；
- tooltip 元素本身必须有
position: absolute（或fixed） - 若 tooltip 是伪元素（
::after），其宿主元素（如.tooltip）必须设position: relative - 避免全局重置
* { z-index: 0 }，它会让所有定位失效 - modal 内部显示异常？大概率是 modal 自身用了
overflow: hidden，得改它，不是 tooltip 加z-index
移动端和键盘可访问性怎么绕过纯CSS的缺陷？
纯CSS方案天生不支持 touch 长按、Tab 键进入、Enter 触发。若需最低限度可访问性，至少做到：
- 给触发元素加
tabindex="0"，让它能被键盘聚焦 - CSS 中同时写
.tooltip:hover .tooltip-text, .tooltip:focus .tooltip-text - 禁用 outline 时，必须提供替代焦点样式，比如
box-shadow: 0 0 0 2px #007bff - iOS Safari 的
:hover只在首次轻触后触发一次，后续要先点空白再点目标——这意味着纯CSS在真机上基本不可用
真正需要跨平台可用的 tooltip，JS 是绕不开的。CSS 只能做降级兜底或视觉微调。
最常被忽略的一点：纯CSS tooltip 的「跟随滚动」本质是伪命题。只要它用 position: absolute，就不可能随宿主滚动；所谓「稳定」，只是把 tooltip 放进宿主元素内部 + 宿主设 position: relative，靠浏览器渲染机制自然对齐——一旦宿主在滚动容器里且容器有 transform，这个对齐立刻崩坏。
