data-tooltip必须写在触发元素上，否则气泡不显示；纯CSS气泡需用opacity+visibility+absolute定位并配transition；移动端需用:focus或JS解决:hover失效；overflow:hidden和z-index不当会导致裁剪或层级错误。
data-tooltip 属性必须写在触发元素上
气泡内容为空、显示 none 或根本不出现，八成是 data-tooltip 放错了位置。它必须直接写在你要悬停/点击的元素上，比如 <button data-tooltip="保存设置">?</button>。伪元素 ::before 只能读取自身所在元素的属性，content: attr(data-tooltip) 不会向上查找父容器或向下穿透子节点。
常见错误：<span><button>⚙️</button><span data-tooltip="设置"></span></span> —— 这样 span 上的 data-tooltip 对按钮的伪元素完全无效。
纯 CSS 气泡必须用 opacity + visibility + absolute 定位
只靠 display: none/block 做显隐，气泡会“啪”一下闪出来，没法加过渡动画。因为 display 变化不触发 transition。
-
opacity: 0+visibility: hidden（默认隐藏） -
transition: opacity 0.2s, visibility 0.2s（两个都得写） -
position: absolute必须配合position: relative在触发元素上，否则气泡会定位到<body>左上角 - 箭头用
::after，主体用::before，两者都要设position: absolute和具体top/left
移动端点击失效不是 bug，是 :hover 机制限制
iOS Safari 和多数 Android 浏览器不支持持续 :hover，点一下就触发又立刻退出，气泡根本留不住。
立即学习“前端免费学习笔记（深入）”；
务实解法只有两个：
- 给触发元素加
tabindex="0"，把:hover换成:focus，键盘用户也能用，触摸设备点一次获得焦点后气泡保持可见 - 放弃纯 CSS，用
tooltip--activeclass + 简单 JS 监听click切换类名（5–10 行足够） - 别碰
pointer-events: none—— 它会让气泡本身不可点击，也打断焦点链，反而更难操作
z-index 和 overflow:hidden 是隐形冲突点
气泡突然被裁掉一半？大概率是父容器设置了 overflow: hidden，而气泡用了 position: absolute 却没脱离该容器的剪裁边界。
解决办法很直接：
- 要么把气泡的
position: absolute提升到更高层级的、没设overflow: hidden的祖先节点下（比如直接挂到<body>） - 要么给父容器加
overflow: visible（如果布局允许） -
z-index必须配合position才生效；只写z-index不写position是无效的
可扩展性真正的难点不在样式，而在定位逻辑和边界处理——一旦页面滚动、缩放或弹窗叠加，纯 CSS 方案就容易偏移或遮挡。这时候 Popper.js 或 UI 库的 Tooltip 组件才真正体现价值。**别等出问题才补，从第一个气泡开始就得想好它将来要出现在哪儿、被谁挡住、怎么逃出来。**
