纯CSS气泡提示需同时用opacity和visibility并声明transition于默认状态：opacity控制透明度，visibility控制交互与占位，二者缺一将导致闪现；transition必须写在基础样式中，而非仅:hover或:focus里，否则移出时无过渡；移动端应改用:focus并设tabindex="0"确保可聚焦。
纯 CSS 气泡提示加过渡效果，关键不是“能不能加”，而是opacity和visibility必须一起用、transition必须写在默认状态里——漏掉任一条件，气泡就会“闪现”或“啪一下出现”，毫无过渡感。
为什么只写 opacity 过渡会失效
单独设 opacity: 0 → 1 看似合理，但浏览器对 opacity: 0 的元素仍保留渲染盒（render box），它可能遮挡下方点击区域，更严重的是：当气泡从 display: none 切换到 display: block 时，opacity 过渡根本不会触发——因为 display 不可动画化，且切换瞬间就完成了状态跳变。
正确做法是用 visibility: hidden 配合 opacity: 0，两者都支持过渡，且 visibility 控制是否参与交互，opacity 控制是否可见：
-
visibility: hidden让元素不可见且不响应鼠标事件，但保留布局占位 -
opacity: 0让元素完全透明，但依然能被聚焦（若需键盘支持） - 两个属性都必须在基础样式中声明，并在
:hover或:focus中显式设为visible和1
transition 必须写在默认状态，不能只放 :hover 里
常见错误是把 transition: opacity 0.2s, visibility 0.2s 只写在 .tooltip:hover::after 里。结果就是悬停时淡入正常，鼠标移开时气泡“啪”地消失——因为离开 :hover 后，该规则失效，transition 不再生效。
立即学习“前端免费学习笔记（深入）”；
正确写法是把 transition 放在气泡伪元素的基础定义中：
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
注意：visibility 的过渡时间必须明确写出，否则切换会无延迟突变；ease 比 linear 更自然，避免机械感。
移动端点击触发时，:focus 替代 :hover 的坑
iOS Safari 和多数 Android 浏览器不支持持续 :hover，点一下就触发又立刻离开，气泡闪一下就收。这不是 bug，是规范行为。想兼容点击，得用 :focus，但有三个硬性前提：
- 触发元素必须可聚焦：给
<img>或<span>加tabindex="0" - 气泡的
transition规则仍要写在基础态，不能只放:focus里 - 焦点离开后气泡要自动收起，得靠
:focus-within或 JS 监听blur；纯 CSS 方案只能依赖用户主动点其他地方失焦
示例结构：
<span class="tooltip" tabindex="0" data-tooltip="这是提示">❓</span>
对应 CSS 中把 :hover 换成 :focus 即可，但别忘了加 outline: none 并提供替代焦点样式，否则可访问性不达标。
三角箭头（::before）要不要加过渡
一般不用。三角箭头由 border 构成，border-color 虽可过渡，但颜色变化对提示信息传达无实质帮助，反而增加渲染开销。更实际的做法是让箭头和气泡主体共用同一套 opacity + visibility 控制，保持同步显隐。
如果真要动箭头位置（比如从顶部移到底部），不要用 top/left 过渡——它们触发重排，卡顿明显。改用 transform: translateY()，例如：
.tooltip::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(0);
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip:hover::before {
transform: translateX(-50%) translateY(4px);
}
这样箭头会有轻微下沉动画，比生硬跳变更柔和，且不触发重排。
最易被忽略的一点：所有过渡属性必须在气泡元素的初始状态就声明完整，包括 opacity、visibility、transform 的起始值——哪怕看起来“没用”，缺一个，浏览器就按默认值补，动画路径就不可控了。
