Popover vs. Dropdown Menu vs. Tooltip 弹出框 vs. 下拉菜单 vs. 工具提示 web
Three anchored overlays with different triggers, content, and dismissal rules
三种锚定式覆盖层，触发方式、内容和关闭规则各不相同
Filter projects
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Overlay trigger覆盖层触发器
popovertarget“The button the little box is attached to” is the overlay trigger.
“小框挂着的那个按钮”就是覆盖层触发器。
Prompt fragmentPrompt 片段the popovertarget overlay trigger that owns and anchors the opened surface
拥有并锚定弹出界面的 popovertarget 覆盖层触发器
-
2 Menu selection highlight菜单选中高亮
role="menuitem"“The bar behind the dropdown action the arrows are on” is the menu selection highlight.
“方向键停在下拉操作上时背后那条高亮”就是菜单选中高亮。
Prompt fragmentPrompt 片段the selection highlight behind the active role="menuitem" in a keyboard-navigable dropdown menu
可键盘导航的下拉菜单中，当前激活 role="menuitem" 背后的选中高亮
-
3 Tooltip arrow工具提示箭头
Tooltip.Arrow“The tiny point aiming the hover label at the icon” is the tooltip arrow.
“把悬停标签指向图标的小尖角”就是工具提示箭头。
Prompt fragmentPrompt 片段the Radix Tooltip.Arrow pointing from the role="tooltip" hint back to its trigger
从 role="tooltip" 提示指回触发元素的 Radix Tooltip.Arrow
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Use the HTML popover attribute for the click-triggered rich overlay, role="menu" for the keyboard-navigable action list, and role="tooltip" only for a brief non-interactive hover or focus hint. Link the tooltip from its trigger with aria-describedby, keep every overlay anchored to its trigger, and implement the correct Escape, outside-click, and focus-dismissal behavior for each pattern.
点击触发的富内容覆盖层用 HTML popover 属性，可键盘导航的操作列表用 role="menu"，简短、不可交互的悬停或聚焦提示才用 role="tooltip"。用 aria-describedby 把工具提示关联到它的触发元素，让每个覆盖层都锚定在触发元素上，并为每种模式实现正确的 Escape、点击外部和焦点关闭行为。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my popover/dropdown/tooltip (Popover API, Radix, floating-ui). Rule out: the wrong primitive — tooltips are hover+focus, never interactive content; the panel clipped by an overflow ancestor instead of portaled to body or using the top-layer Popover API; flip/shift middleware missing so it overflows at viewport edges; outside-click closing it before the inside click registers. The symptom:
调试我的弹出框/下拉菜单/工具提示（Popover API、Radix、floating-ui）。逐一排除：用错了基础组件——工具提示只响应悬停和聚焦，绝不放可交互内容；面板被 overflow 祖先裁掉，没有 portal 到 body 或使用顶层的 Popover API；缺少 flip/shift 中间件，导致在视口边缘溢出；外部点击在内部点击生效之前就先把它关了。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | popover | |
| ARIA | role="tooltip" | |
| ARIA | role="menu" | |
| Radix | Popover | |
| Radix | DropdownMenu | |
| Radix | Tooltip |