:hover + ::after 不能直接显示 Tooltip，因伪元素仅支持 content 渲染且需父元素设 position: relative 才能精确定位；纯 CSS 无法真正关闭 Tooltip，仅能通过 :focus 或 transition 控制显隐；移动端需 JS 或降级方案。
为什么:hover + ::after 不能直接显示 Tooltip
因为伪元素默认不支持 content 以外的交互行为，且若父容器没设 position: relative，::after 的 position: absolute 会相对于最近定位祖先（常是 body），导致提示框飘到页面角落。
- 必须给触发元素（如按钮、链接）加
position: relative -
::after或::before需显式设置content: "提示文字"，空字符串或未设 content 就不渲染 - 如果提示文本含引号或换行，
content中要用\200B（零宽空格）或white-space: pre-wrap处理，否则折行失效
如何用纯 CSS 实现可点击关闭的 Tooltip
纯 CSS 无法“关闭”Tooltip——:hover 离开即消失，所谓“可关闭”本质是换用 :focus 或配合 <input type="checkbox"> 模拟状态。但多数场景下，用户真正需要的是「鼠标移入延迟显示 + 移出延迟隐藏」，避免闪动。
- 用
transition: opacity 0.2s, visibility 0.2s控制淡入，配合visibility: hidden/visible避免占位干扰 - 不要只靠
opacity: 0，否则仍响应鼠标事件，悬停在透明区域会持续触发 - 若需键盘焦点支持（如 Tab 进入），必须加
tabindex="0"到触发元素，并用&:focus::after补全
移动端 Touch 设备上 Tooltip 不生效怎么办
iOS 和 Android 浏览器对 :hover 支持极弱：首次触摸时可能触发一次，之后不再响应。这不是 Bug，是规范行为——:hover 在触屏设备上被定义为“模拟悬停”，仅用于向后兼容。
- 真正在移动端可用的方案只有 JS 监听
touchstart+focus，或改用title属性（原生、无样式、无动画） - 若坚持用 CSS，可尝试
@media (hover: hover) and (pointer: fine)做条件启用，把 Tooltip 降级为仅桌面显示 - 别依赖
:active模拟——它只在手指按下瞬间生效，松手就消失，用户根本来不及看
Tooltip 文字过长时如何自动换行又不撑破容器
绝对定位的 Tooltip 默认是 inline 元素，width 不生效，white-space: normal 才能换行，但需配合 max-width 和 word-break 控制断行逻辑。
立即学习“前端免费学习笔记（深入）”；
- 必须设
max-width: 200px（推荐 180–240px），否则长文本会无限拉宽 - 加
white-space: pre-wrap保留换行符，同时允许自动折行；若只要英文断词，用word-break: break-word - 字体大小建议 ≤ 14px，行高
line-height: 1.4，避免和箭头错位；箭头通常用border三角实现，其位置依赖top/left像素值，不是百分比
最麻烦的其实是 Tooltip 的定位偏移计算——不同字号、行数、父元素 padding 下，箭头尖端很难精准对齐触发点中心。这得靠反复调试 top 和 transform: translateX(-50%)，没有通用公式。
