气泡提示必须用::after伪元素，设content: ""并配合position: relative触发元素；data-tip存内容；opacity与visibility需协同实现淡入；箭头用left: 50%+transform居中；移动端用@media (hover: hover)渐进增强。
气泡提示必须用 ::after 伪元素，不能用 ::before 堆叠顺序会错乱
因为气泡箭头需要精确贴在触发文字下方，::after 默认渲染在元素内容之后、盒模型内部，配合 position: absolute 才能稳定锚定；若误用 ::before，在部分浏览器（尤其是 Safari）中容易被父容器的 overflow: hidden 或层叠上下文截断。
关键点：
-
::after必须设content: ""，否则不渲染 - 触发元素需设
position: relative，否则::after的top/left会相对于最近定位祖先计算，可能飘走 - 气泡内容写在
data-tip属性里，避免污染 HTML 结构，也方便复用
:hover 触发时，::after 的 opacity 和 visibility 要配合使用
只靠 opacity: 0 → 1 动画会有点击穿透问题（透明但占位），只靠 visibility: hidden → visible 则无法做淡入效果。必须两者结合：
- 初始状态：
opacity: 0; visibility: hidden; -
:hover状态：opacity: 1; visibility: visible; - 加
transition: opacity 0.2s ease-in-out;，visibility不参与过渡，避免闪动
错误写法：transition: all 0.2s —— visibility 无法过渡，会导致气泡瞬间出现再淡入，体验割裂。
箭头定位靠 transform: translateX(-50%) + left: 50%，别用 margin-left: -xpx
气泡底部箭头要居中对齐触发文字中心，硬写像素偏移（如 margin-left: -8px）会因字体大小、缩放、多行文本失效。正确方式是：
- 箭头用
border或clip-path生成（推荐border兼容性好） - 给箭头容器设
left: 50%; transform: translateX(-50%); - 这样无论文字宽度怎么变，箭头始终水平居中
示例箭头代码：
::after {
content: attr(data-tip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
padding: 4px 8px;
background: #333;
color: #fff;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
}
::after::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: #333;
}
移动端 hover 失效？用 @media (hover: hover) 做渐进增强
纯 CSS 气泡在触屏设备上默认不响应 :hover，但强行加 onclick 就破了“无 JS”前提。稳妥做法是：
- 默认关闭气泡（
display: none） - 用媒体查询检测支持 hover 的设备：
@media (hover: hover) { [data-tip]:hover::after { display: block; } } - 这样桌面端正常显示，手机端不加载、不占布局、不触发伪元素渲染
注意：不要用 @supports (hover: hover) —— 这是无效语法，@supports 只支持属性/值检测，hover 是媒体特性，必须用 @media。
真正麻烦的是多行文本下的气泡定位——top: 100% 会贴在最后一行下方，如果希望始终锚定第一行或中间行，就得放弃纯 CSS，加一行 JS 计算位置。这点容易被忽略，但确实超出了纯 CSS 能力边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
