气泡提示必须用 relative + absolute 组合，因 absolute 元素以最近已定位祖先为参考，若父级无 position: relative 则可能相对 body 定位导致错位；父级设 relative 后，子气泡用 absolute 配 top/left 或 transform 微调，且需注意 overflow、z-index、箭头对齐、移动端收起及可访问性。
气泡提示为什么必须用 relative + absolute 组合
因为 absolute 定位的元素会脱离文档流，且以「最近的已定位祖先」为参考系。如果父容器没设 position: relative，absolute 子元素就会一路往上找，最终可能相对于 body 或某个意外的父级定位，导致气泡飘到屏幕任意角落。
常见错误现象：tooltip 突然出现在页面顶部、右侧、甚至被遮挡——八成是漏写了父级的 position: relative。
- 父级只需加
position: relative，无需设置top/left等偏移 - 子级（气泡）用
position: absolute，再配top/left或transform微调位置 - 不要给父级加
overflow: hidden，否则气泡可能被裁剪
点击触发时如何控制 tooltip 显示/隐藏
纯 CSS 实现点击显示气泡非常受限：CSS 没有「点击态」伪类（:click 不存在），所以必须借助 :checked 配合隐藏的 <input type="checkbox">，或直接用 JS 控制类名。后者更可控、兼容性更好。
使用场景：按钮旁弹出说明、表单字段校验提示、操作确认浮层。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 JS 切换
tooltip元素的show类，配合 CSS 的opacity+visibility实现淡入效果 - 避免只用
display: none切换，会导致动画失效 - 记得在 JS 中给
tooltip添加aria-hidden="true/false"，兼顾可访问性
气泡箭头怎么对齐按钮边缘
箭头本质是用 ::before 或 ::after 生成的三角形，靠 border 技巧实现。关键在于它的定位必须和气泡主体保持一致参考点，否则一动就错位。
参数差异：箭头方向（上/下/左/右）决定哪三边设 border，剩下一侧透明；大小由 border-width 控制。
- 箭头元素也要设
position: absolute，且父容器（气泡）需有position: relative - 用
transform: translateX(-50%)居中水平箭头，比硬写left: 50%更稳 - 别用
margin调箭头位置——它会受父级box-sizing或字体渲染影响，偏差难控
移动端点击后气泡不消失？几个隐蔽坑
PC 上 hover 可自动收起，但移动端没有 hover，用户点开后常卡在展开态。这不是 CSS 能单独解决的，得靠 JS 补逻辑。
性能影响：频繁切换 visibility 和 opacity 不会重排，但若气泡含图片或复杂 DOM，首次渲染仍可能卡顿。
- 监听
click外部区域（document）并关闭 tooltip，但要排除点击在 tooltip 或触发按钮本身 - 安卓 WebView 下，
focusout不可靠，优先用blur+setTimeout延迟判断 - iOS Safari 对
pointer-events: none在opacity: 0元素上处理异常，建议用visibility: hidden彻底禁用交互
最易被忽略的一点：气泡的 z-index 必须高于所有同级元素，但又不能无脑设 9999——它该和按钮处于同一 stacking context，否则可能被父容器的 overflow: hidden 或 transform 截断。
