纯CSS气泡提示需用opacity+visibility组合过渡，禁用display；触发元素须设position:relative；移动端应改用:focus或JS控制显隐。
纯 CSS 气泡提示加过渡效果，关键不是写 transition 就完事——display: none 不能触发过渡，visibility 不配 opacity 会硬切，top/left 直接改值会导致位移抖动。必须用对组合、设对初始态、管住定位流。
为什么 transition: all 0.3s 不起作用
常见错误是给气泡元素写 transition: all 0.3s，然后靠 :hover .tooltip-bubble { display: block; } 控制显隐。但 display 是离散属性，浏览器不支持对其做插值动画，transition 会直接失效，气泡“啪”一下闪出来。
真正可过渡的显隐控制只有两组组合：
-
opacity: 0 → 1+visibility: hidden → visible（推荐） -
transform: scale(0.9) → scale(1)+opacity: 0 → 1（需额外加 transform-origin）
注意：visibility: hidden 仍占文档流位置，所以气泡必须是 position: absolute 或 fixed，否则会撑开空白。
立即学习“前端免费学习笔记（深入）”；
opacity + visibility 过渡必须同时声明两个属性
只写 transition: opacity 0.2s，visibility 切换仍是瞬时的；只写 transition: visibility 0.2s，浏览器根本不识别——visibility 本身不可动画，但它配合 opacity 的过渡时机，能实现“视觉上渐入+逻辑上可访问”的效果。
正确写法（含默认隐藏态）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
top: 100%;
margin-top: 4px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
[data-tooltip]:hover::before {
opacity: 1;
visibility: visible;
}
漏掉任一属性，过渡都会断档：要么先闪出再淡入，要么淡入一半突然消失。
移动端点击后气泡不保持？别硬扛 :hover
iOS Safari 和 Android Chrome 对 :hover 的处理是“单次触发+立即释放”，点一下就 hover 然后立刻 unhover，气泡闪一下就没了。这不是你 CSS 写错了，是规范行为。
务实解法只有两个：
- 给触发元素加
tabindex="0"，改用:focus替代:hover（键盘用户也受益） - 用 JS 绑定
click，切换一个 class 如.tooltip-active，再用 CSS 控制该 class 下的伪元素显隐
如果选 :focus 方案，记得加 outline: none 并补上 :focus-visible 保证键盘可访问性。
气泡位置偏移或飘到左上角的定位陷阱
气泡没贴着目标元素、甚至飞到页面左上角，90% 是因为没给触发元素设 position: relative。伪元素 ::before / ::after 的 position: absolute 是相对于最近的 position: relative | absolute | fixed 祖先定位的——如果没找到，就一路回溯到 <body>。
必须确认三点：
- 触发元素（如
<button>）有position: relative - 伪元素自身设了
position: absolute，且top/left值合理（例如top: 100%表示紧贴下方） - 父容器没有
overflow: hidden且没裁掉气泡区域（尤其在卡片、弹窗内嵌 tooltip 时）
箭头居中常用 left: 50%; transform: translateX(-50%)，比固定 left: 20px 更健壮——按钮宽度变，箭头依然正对中心。
