组件 · 浮层 · 33
提示气泡 提示气泡 = 距触发器 6 像素的深色小片，用于解释图标，不含链接也不接收焦点。
直达修改 Prompt →
⧉
Archive prompt
⌘A
↗ Naming an icon button
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a tooltip component.
STYLE
- dark chip #1D1D1F, 12px white text, 6px radius, 6px from the trigger
- a 4px arrow points back at the trigger center
- max width 200px, text wraps to two lines then truncates
- a shortcut hint sits right-aligned in #8E8E93
STATES
- hidden, 400ms hover delay, visible, dismissed on pointer leave
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing tooltips delay before appearing.
Use:
- a 400ms hover delay before the chip shows
- moving the pointer away hides it immediately
- keep colors, radius and the arrow unchanged
Only add the delay.
Create a tooltip component, replacing the existing one.
Requirements:
- dark chip #1D1D1F, 12px white text, 6px radius, 6px offset
- a 4px arrow pointing at the trigger, four placements supported
- max width 200px, wraps to two lines, then truncates
- 400ms open delay, immediate close, hidden on touch devices
- keyboard focus opens it too; Esc dismisses
Keep the trigger buttons unchanged.
MOTION
- Enter: fade with an 8px offset from the trigger, 120ms ease-out, after a 300ms delay.
- Exit: 80ms. Never scale-bounce a tooltip.
- Origin points at the element it describes.
- prefers-reduced-motion: fade only, no offset.
修改类 Prompt 只动目标，不碰页面其余部分。
提示气泡是什么？ 提示气泡为图标无法表达的东西命名。点名方位、延迟，以及「内部不放交互元素」这条规则。
变体 点击属性即可在预览中高亮。
基础 在 Prompt 里写明这个类型。
带快捷键 在 Prompt 里写明这个类型。
可换行 在 Prompt 里写明这个类型。
方位 给具体值，不要只给感觉词。
延迟 给具体值，不要只给感觉词。
偏移 给具体值，不要只给感觉词。
箭头 给具体值，不要只给感觉词。
最大宽度 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
隐藏 在 Prompt 里写明这个状态。
延迟中 在 Prompt 里写明这个状态。
可见 在 Prompt 里写明这个状态。
已消失 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
什么时候用 为工具栏里的纯图标按钮命名 在操作旁显示键盘快捷键 解释某个控件为何被禁用 什么时候别用 文字里有链接或按钮——改用弹出层 内容超过两行 主要输入方式是触摸——没有悬停 Nothing interactive goes inside a tooltip — the pointer cannot reach a link living in a chip that vanishes on hover.
复制 Prompt Create a tooltip component.
STYLE
- dark chip #1D1D1F, 12px white text, 6px radius, 6px from the trigger
- a 4px arrow points back at the trigger center
- max width 200px, text wraps to two lines then truncates
- a shortcut hint sits right-aligned in #8E8E93
STATES
- hidden, 400ms hover delay, visible, dismissed on pointer leave
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui