必须用:hover控制显示、::before/::after渲染气泡，且伪元素需设content（如content: attr(data-tip)或""）才可见；箭头用三边透明+单边实色border拼出，配合absolute定位与transform居中；移动端需用:focus或JS替代:hover。
hover 触发气泡提示的基本结构怎么搭
必须用 :hover 控制显示，用 ::before 或 ::after 渲染气泡本身。伪元素默认不渲染，得显式设置 content（哪怕只是空字符串 ""），否则无论样式写多全都看不见。
常见错误是只写了 .tip:hover::after 却漏了 content: ""，结果鼠标悬停完全没反应。另外，伪元素默认是 inline 级别，若需定位或设宽高，得加 display: block 或 inline-block。
气泡箭头怎么用伪元素画出来
箭头本质是旋转 45° 的小正方形，靠 border + transform: rotate(45deg) 实现，或者更稳妥的纯 border 技巧（避免 transform 影响布局）。推荐后者：用三边透明、一边实色的 border 拼出三角形，再用 position: absolute 偏移到合适位置。
- 顶部气泡箭头：
border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #333;，再设top: 100%和left: 50%，最后margin-left: -6px居中 - 右侧气泡箭头：
border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #333;，配合right: 100%和top: 50%，再margin-top: -6px - 避免用
transform: translate(-50%, 0)居中箭头——某些旧版 Safari 对伪元素的 transform 支持不稳定
气泡内容换行和宽度控制要注意什么
伪元素里的文字默认不换行，white-space: nowrap 是默认值。要支持自动换行，必须显式设 white-space: normal，再配合 max-width 和 word-break: break-word（或 overflow-wrap: break-word）。
立即学习“前端免费学习笔记（深入）”；
如果气泡宽度写死（如 width: 200px），在小屏幕下容易溢出容器；建议用 max-width: 240px + min-width: 80px，既防过窄也防过宽。另外，font-size 小于 14px 在部分安卓 WebView 中渲染模糊，慎用。
移动端 hover 失效怎么办
真机上 :hover 只在模拟器或少数 Android 浏览器里生效，iOS Safari 基本不触发。不能依赖它做核心提示功能。若必须兼容，有两个务实方案：
- 加一层 JS：监听
touchstart给元素加临时 class（如is-active），CSS 里写.tip.is-active::after替代:hover - 改用
focus+tabindex：给提示目标加tabindex="0"，用:focus::after，键盘用户和部分触屏设备（点按后获得焦点）都能触发 - 别用
@media (hover: hover)做条件判断——它只反映设备能力，不解决实际交互逻辑，反而让代码更难调试
最麻烦的其实是 z-index 层叠顺序：气泡常被父容器的 overflow: hidden 截断，或被其他绝对定位元素遮住。检查时优先看父级有没有 overflow 和 position: relative，而不是一上来就调 z-index。
