返回
UI · №22 · PLATE
浮层（怎么选）Popover vs Dropdown vs Tooltip
鼠标放上去弹出来的小框点一下弹出来的小面板悬浮提示下拉菜单
先看怎么选
你想「点一下/悬停弹个小东西」？三种浮层的触发方式、内容规则、关闭时机完全不同——选错的代价是 agent 给你一个 hover 就消失的框，而你其实想在里面点按钮。
朱批要点进去操作 → Popover；选一项就走 → Dropdown；只是看一眼说明 → Tooltip。
LIVE SPECIMEN真的能玩，点点看
- 重命名
- 复制
- 删除
悬停才出现的一行说明
气泡卡
Popover
点击触发的小面板，里面可以有可交互内容（表单、按钮），停留操作不消失。
- 适合
- 筛选器、小设置面板、需要用户在里面操作的确认气泡。
- 不适合
- 纯文字说明——那是 Tooltip 的活，别用杀鸡的牛刀。
实现细节与 Prompt
- web
- popover 属性（原生）
- react
- <Popover>（Radix/shadcn）
Use a click-triggered popover anchored to the button: it contains interactive content (a small form), stays open while interacting, closes on outside click or Escape.下拉菜单
Dropdown Menu
点击触发的菜单项列表，选完一项立即关闭。
- 适合
- 操作菜单（重命名/删除）、从有限选项里挑一个。
- 不适合
- 需要停留交互的复杂内容——选完即关的规则会打断用户。
实现细节与 Prompt
- web
- role="menu" + 键盘导航
- react
- <DropdownMenu>（Radix/shadcn）
Use a dropdown menu: opens on button click, shows a vertical list of menu items, closes after selecting an item or clicking outside; support arrow-key navigation.文字提示
Tooltip
悬停/聚焦触发的一行纯文字说明，移开即消失，永远不可交互。
- 适合
- 图标含义、缩写解释、"这个按钮是干嘛的"。
- 不适合
- 里面放按钮或链接——用户永远点不到（鼠标一移过去它就没了）。
实现细节与 Prompt
- web
- role="tooltip"（title 属性的可控版）
- react
- <Tooltip>（Radix/shadcn）
Use a tooltip: appears on hover/focus after a 300ms delay, shows one line of plain text, disappears on mouse leave, role="tooltip", never contains interactive elements.详细说明
「弹个小东西」是浮层类需求的统称，但 Popover、Dropdown、Tooltip 的行为契约完全不同：能不能交互、什么时候关、怎么触发。跟 agent 说对名字，它才能给对行为。