title属性无法自定义样式、动画和内容结构，且移动端基本不触发；纯CSS气泡需用data-tooltip存内容，配合::before/::after伪元素定位绘制，并依赖position:relative父容器建立定位上下文。
工具提示气泡为什么不能只靠 title 属性
title 是浏览器原生支持的提示，但无法自定义样式、动画、内容结构，且移动端基本不触发。纯 CSS 工具提示必须脱离 title，用 data-* 存内容 + ::before/::after 生成气泡。
核心实现：用 data-tooltip + :hover 触发显示
把提示文字存在属性里，避免污染 DOM 结构；用伪元素画气泡和箭头，靠 position: absolute 定位。关键点在于父容器必须是 position: relative，否则绝对定位会脱出上下文。
常见错误现象：::after 气泡没出现、位置飘到页面左上角、鼠标移开后残留——基本都是定位上下文缺失或 display: none 没配对导致的。
- 必须给触发元素（如
<span></span>或<button></button>）加position: relative - 气泡用
::before画主体，::after画小三角，两者都设content: attr(data-tooltip) - 用
opacity+transition实现淡入，别只用display: none/block（它无法过渡）
.tooltip {
position: relative;
}
.tooltip::before,
.tooltip::after {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
.tooltip::before {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 10;
}
.tooltip::after {
content: '';
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #333;
}
移动端适配和焦点可访问性怎么补
CSS 的 :hover 在触摸设备上不可靠，且键盘用户无法用 Tab 进入提示。必须补充 :focus 和 :focus-within，并允许用户按 Esc 关闭（这需要 JS，但“纯 CSS”方案本身无法做到关闭逻辑，只能退而求其次让焦点停留时保持可见）。
立即学习“前端免费学习笔记（深入）”；
性能影响：大量使用 transform 和 opacity 是 GPU 友好的，但若气泡内含图片或复杂 HTML，建议用 will-change: opacity 提前提示渲染引擎。
- 为可聚焦元素（如
button、a[href]）加tabindex="0" - 在 CSS 中追加
.tooltip:focus::before, .tooltip:focus::after规则 - 避免在
body上用*:hover全局代理，iOS Safari 会禁用所有 hover 样式
箭头方向错位、文字换行、z-index 被遮挡怎么办
气泡箭头方向由 bottom/top/left/right 和 transform 共同决定，微调常需试值；多行文本会撑开 ::before，但 white-space: nowrap 又容易溢出；z-index 失效往往是因为父级有 transform 或 filter 创建了新层叠上下文。
- 箭头偏移：改
bottom: 120%→115%或调整transform: translateX(-50%)中的百分比 - 多行支持：删掉
white-space: nowrap，加max-width: 200px和word-break: break-word - z-index 失效：检查父容器是否用了
transform、opacity 、<code>filter，这些都会隐式创建层叠上下文，把气泡锁在局部层级里
最常被忽略的是：气泡内容若含链接或按钮，::before 伪元素无法承载交互，必须用真实子元素 + pointer-events: none 配合，但这已超出“纯 CSS”边界。真要交互，就得换方案。
