纯CSS Tooltip在现代项目中难用，因CSS无法感知鼠标位置、焦点状态和滚动容器，导致定位错位、不可聚焦、内容截断、动画卡顿；需触发元素设position: relative且内嵌提示文本，配合:hover/:focus双态控制、max-width/word-break防溢出、transform居中箭头，并妥协iOS Safari的:hover不稳定性。
为什么纯CSS Tooltip在现代项目里越来越难用
纯CSS实现tooltip确实能避免JS依赖，但实际项目中常遇到定位错位、无法聚焦、内容截断、动画卡顿等问题。根本原因在于CSS缺乏对鼠标位置、焦点状态、滚动容器的感知能力——它只能响应伪类（如:hover、:focus），且position: absolute依赖父元素有定位上下文，一旦父级overflow: hidden或transform，提示框就可能消失。
最简可用的纯CSS Tooltip结构与关键样式
必须保证HTML结构满足“触发元素内嵌提示内容”，否则::before/::after无法生成带文本的气泡。常见错误是把提示文字放在兄弟节点或外部容器里。
正确结构示例：
<span class="tooltip"> Hover me <span class="tooltip-text">This is the tip</span> </span>
核心CSS要点：
立即学习“前端免费学习笔记（深入）”；
-
.tooltip需设为position: relative，否则.tooltip-text的absolute会相对于body定位 -
.tooltip-text默认opacity: 0; visibility: hidden; pointer-events: none，避免遮挡下方元素 - 用
.tooltip:hover .tooltip-text触发动画，而非:hover::after——后者无法插入动态文本 - 加
transition: opacity 0.2s, visibility 0.2s，但visibility不能做缓动，所以必须配合opacity控制渐显
移动端和键盘可访问性的硬伤怎么绕
纯CSS方案天然不支持触摸长按、键盘Tab进入、Enter触发等交互。若需基础可访问性，至少做到：
- 给
.tooltip添加tabindex="0"，让其可获得焦点 - 同时监听
:hover和:focus：写成.tooltip:hover .tooltip-text, .tooltip:focus .tooltip-text - 用
outline: none时务必提供其他焦点指示（如box-shadow），否则违反WCAG 2.1 - iOS Safari对
:hover支持不稳定，轻触只触发一次，后续需点击空白处再点目标才生效——这意味着纯CSS在iOS上基本不可靠
当内容超长或需要换行时的排版陷阱
.tooltip-text默认是white-space: nowrap，超出容器宽度就会溢出或撑破布局。修复方式取决于场景：
- 固定宽度提示：设
max-width: 200px; word-break: break-word - 自适应宽度：用
width: max-content; max-width: 80vw，但IE11不支持max-content - 强制单行+省略：加
overflow: hidden; text-overflow: ellipsis，但需搭配white-space: nowrap - 绝对定位偏移量写死（如
top: 120%）会导致不同字号下错位，推荐用top: 100%; margin-top: 4px更鲁棒
真正棘手的是箭头对齐——用::before生成三角形时，left: 50%在字体缩放或RTL语言下会偏移，安全做法是结合transform: translateX(-50%)。
