纯 CSS 实现按钮气泡提示需：按钮设 position: relative；用 :hover + ::after 显示 data-tooltip 内容，content: "" 不可少；方向靠 top/bottom/left/right 与 transform 定位；小三角用 ::before + 单边 border 实现；兼顾 focus、aria-describedby 和深色模式适配。
怎么用纯 CSS 实现按钮气泡提示（tooltip）？
不用 JS 就能做，核心是利用 :hover + ::after 伪元素，配合 position: relative/absolute 定位。关键是父容器（按钮）要设 position: relative，否则气泡会相对 body 定位，飘走。
常见错误：直接给 button 加 ::after 却没设 position: relative，导致气泡位置错乱；或者忘了加 content: ""，伪元素根本不会渲染。
- 气泡内容写在
data-tooltip属性里，便于维护和语义化 - 用
white-space: nowrap防止文字换行撑开气泡 - 加
pointer-events: none到气泡上，避免鼠标移过去触发反复进出的闪烁 - 建议最小宽度设
min-width: 80px，太窄时文字挤在一起可读性差
气泡方向怎么控制（上/下/左/右）？
靠伪元素的 top/bottom/left/right 和 transform 微调。比如“上方气泡”要设 top: auto; bottom: 100%;，再用 transform: translateX(-50%) 居中对齐按钮中心。
容易踩的坑：左右方向时忘了改 top 为 top: 50% 并加 transform: translateY(-50%) 垂直居中；或者用 margin 替代 transform，导致响应式下偏移不准。
立即学习“前端免费学习笔记（深入）”；
- 上：
bottom: 100%; left: 50%; transform: translateX(-50%); - 下：
top: 100%; left: 50%; transform: translateX(-50%); - 右：
top: 50%; left: 100%; transform: translateY(-50%); - 左：
top: 50%; right: 100%; transform: translateY(-50%);
怎么让气泡带小三角（尖角）？
用另一个伪元素 ::before 画三角，本质是把一个宽高为 0 的盒子，只设单边 border，其余三边 transparent。比如向下箭头就是 border-top: 6px solid #333 + border-left/right: 6px solid transparent。
注意三角位置必须和气泡主体对齐：如果气泡居中，三角也要用 left: 50% + transform: translateX(-50%)；如果气泡靠右，三角就得用 right: 12px 这类固定偏移。
- 三角颜色要和气泡背景色一致，否则露白边
- 三角大小建议 5–7px，太大显得突兀，太小不清晰
- 别忘了给三角加
z-index: 1，否则可能被气泡遮住 - 移动端慎用：悬停失效，得额外加
focus或点击逻辑
移动端适配和可访问性要注意什么？
纯 :hover 在 iOS 和 Android 触屏设备上基本无效——用户点一下就触发，松手就消失，来不及看。必须补充 :focus 和 :focus-within，并确保按钮可 tab 焦点到达（tabindex="0" 或本身是 button 元素）。
可访问性常被忽略：屏幕阅读器默认不读 data-tooltip，得用 aria-describedby 关联到一个隐藏的 div，或直接用 title 属性（但 title 有延迟且样式不可控）。
- 按钮必须是
button或带role="button"的元素，不能用div+ click 事件模拟 - 气泡出现后，焦点仍在按钮上，按 Tab 应跳过气泡（所以气泡本身不要设
tabindex） - 深色模式下，检查气泡背景色是否仍足够对比（比如用
color-scheme: light dark或@media (prefers-color-scheme: dark)）
真正麻烦的是多层嵌套场景：比如按钮在 overflow: hidden 的卡片里，气泡会被裁掉——这时要么改父容器 overflow，要么用 position: fixed + JS 动态计算位置，纯 CSS 就兜不住了。
