提示气泡

气泡 = 锚点元素的 ::after（content: attr(data-tip) 读取提示文案），箭头 = ::before 旋转 45° 的正方形、只保留右下描边拼出尖角，二者同步淡入，箭头与气泡无缝衔接。

延迟淡入的实现是 transition 的第三段时间值（transition: opacity .26s ease .35s）：悬停瞬间不弹，停留 350ms 才出现，避免扫过按钮时气泡频闪；移出立即消失（visibility 延迟归零）。

可见性三态用 opacity + visibility + translate 组合：visibility 延迟切换保证淡出动画播完才真正隐藏，同时不可点击、不干扰读屏（演示文案短，生产建议补 role='tooltip'）。

气泡定位 bottom: calc(100% + gap) 挂在锚点上方并水平居中；文案用 white-space:nowrap 防换行，超长文案在真实项目里应改 max-width + 多行。

气泡元素始终存在于 DOM（纯 CSS 方案），对 pointer-events:none 所以不挡交互；若需大量 tooltip 建议改用 JS 定位（anchor positioning 或 Popover API）。

reduced-motion：延迟清零、过渡压到 0.01ms，气泡即时显隐；演示动画同步关闭。