工具提示动画（4 向 CSS Tooltip 气泡源码，零 JS）

效果演示（真实可交互）

工具提示（Tooltip）是图标按钮、表格操作列里最常见的微交互：鼠标悬停时在元素附近弹出解释文案，移开后自然消失。演示区共 4 款按钮，分别对应上、下、左、右四个方向，全部由纯 CSS 实现——文案写在 data-tip 属性里，气泡与箭头分别由 ::after 和 ::before 伪元素生成，无需一行 JS。把鼠标移到按钮上可以看到气泡带着轻微过冲的弹性缓动滑入；用键盘 Tab 聚焦按钮同样能弹出提示，屏幕阅读器用户也能感知到焦点位置，无障碍表现友好。气泡采用深底白字、圆角与轻投影，在浅色页面上对比清晰；气泡设了 pointer-events: none，鼠标即使悬停在气泡上也不会触发闪烁或遮挡按钮点击。四个方向的气泡都带小箭头指向触发元素，帮助用户快速建立空间关联。除了纯展示，工具提示也常用于解释操作后果，比如「删除后不可恢复」这类关键文案；深浅配色与箭头指向让信息归属明确，用户无需猜测提示来自哪个按钮，误操作率也会随之下降。

完整代码

HTML 只需给按钮加一个 data-tip 属性，方向用 data-pos 声明：

<button class="tt-btn" data-tip="顶部提示：悬停或聚焦我看看" data-pos="top">顶部提示</button>
<button class="tt-btn" data-tip="底部提示，带小箭头" data-pos="bottom">底部提示</button>

CSS 核心：气泡文案由 content: attr(data-tip) 读取，四个方向只改定位，动画统一走 transform：

.tt-btn { position: relative; }

/* 气泡本体：white-space 保持单行，opacity + transform 组合过渡 */
.tt-btn::after {
  content: attr(data-tip);
  position: absolute; padding: 8px 12px; border-radius: 8px;
  background: #1c2442; color: #fff; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

/* 顶部方向：气泡在按钮上方，从下往上滑入 */
.tt-btn[data-pos="top"]::after {
  left: 50%; bottom: calc(100% + 12px);
  transform: translate(-50%, 6px);
}

/* 小箭头：45° 旋转的正方形，与气泡同底色 */
.tt-btn[data-pos="top"]::before {
  content: ""; position: absolute; width: 8px; height: 8px;
  left: 50%; bottom: calc(100% + 8px); margin-left: -4px;
  background: #1c2442; transform: rotate(45deg) scale(0);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
}

/* 悬停或键盘聚焦时同时点亮气泡与箭头 */
.tt-btn:hover::after, .tt-btn:hover::before,
.tt-btn:focus-visible::after, .tt-btn:focus-visible::before {
  opacity: 1; transform: translate(0, 0);
}
.tt-btn:hover::before, .tt-btn:focus-visible::before { transform: rotate(45deg) scale(1); }

底部、左侧、右侧的实现与顶部完全同构，只改定位坐标与初始位移方向，完整写法见演示组件源码中的 [data-pos="bottom" | "left" | "right"] 规则。

参数说明

兼容性与性能

• 纯 CSS 实现，无 JS、无额外 DOM，动效只操作 transform 与 opacity，走合成器线程，60fps 流畅
• attr() 取属性值做 content 在 Chrome / Firefox / Safari / Edge 最新版均支持
• pointer-events: none 保证气泡不会阻挡按钮本身继续被悬停，避免闪烁
• 白名单无需任何浏览器前缀；:focus-visible 让键盘用户获得与鼠标对等的反馈
• attr() 支持任意文案内容，包含 emoji 与换行符都会原样呈现；若页面本身就是暗色主题，把 ::after 与 ::before 的背景改为浅色、文字改为深色即可整体反色适配

常见问题

Q: 气泡文案很长会换行吗？ 默认 white-space: nowrap 强制单行；文案过长时去掉该属性并设置 max-width 即可自动换行，同时把定位从 50% 改成靠左对齐，避免超出屏幕。

Q: 想延迟 0.3 秒再弹出？ 把 transition 里的 opacity .2s 改为 opacity .2s .3s，并把 hover 态下的 transition 恢复为无延迟，即可实现「慢出快收」的经典体验。

Q: 放在页面边缘会溢出屏幕吗？ 会。右侧按钮的 tooltip 建议用 data-pos="left"，或对 ::after 追加 max-width: 60vw 并允许换行。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名。