FEEDBACK & OVERLAY
工具提示Tooltip
悬停 500ms 后出现的一行小黑条，解释"这个图标/词是什么"。
效果预览
复制到剪贴板
导出 PDF · ⌘E
适合用在哪
图标按钮、缩写术语、截断的全文预览、快捷键提示。
容易踩的坑
- 只在 hover 时显示，键盘聚焦和触屏都无法触发，关键说明对这部分用户不可见。
- 把必填规则、错误原因等关键信息藏进 tooltip，用户不悬停就永远看不到。
- 未设置 aria-describedby 关联触发元素，读屏用户听不到提示内容。
设计提示词 · Prompt
工具提示（Tooltip）：深色底（#17171B）白字、12-13px、圆角 6-8px、内边距 5-9px、带 6px 小三角，悬停延迟 300-500ms 后淡入（150ms）。定位在触发元素上方（首选）或下方，水平居中，贴边时自动翻转。浅色变体：白底 + 描边 + 投影，用在深色界面上。规则：只放一行短语，超过两行改用 Popover；纯装饰性图标也要有 tooltip（可访问性）；触屏上改为长按触发或首次点击显示。快捷键提示格式："复制 ⌘C"。
Tooltip: dark background (#17171B) with white text, 12-13px, border radius 6-8px, padding 5-9px, with a 6px small triangle; fades in (150ms) after a 300-500ms hover delay. Positioned above the trigger element (preferred) or below, horizontally centered, flipping automatically near edges. Light variant: white background + border + shadow, used on dark interfaces. Rules: only one short phrase; if it exceeds two lines use a Popover instead; purely decorative icons also need a tooltip (accessibility); on touch screens trigger with a long press or show on first tap. Shortcut hint format: "Copy ⌘C".
常见搭配
同一页面里经常和「工具提示」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-tipstage">
<span class="d-tip">
<span class="d-tip__bubble">复制到剪贴板</span>
<button class="d-iconbtn2">⧉</button>
</span>
<span class="d-tip">
<span class="d-tip__bubble d-tip__bubble--light">导出 PDF · ⌘E</span>
<button class="d-iconbtn2 d-iconbtn2--gd">⇩</button>
</span>
</div>