“the list that opens under a menu button”「菜单按钮下面展开的列表」
“the label that appears when you hover”「悬停时出现的小标签」
“a popup with controls inside it”「里面带控件的弹窗」
“the tiny explanation next to an icon”「图标旁边的小说明」
Popover
Filter projects
Dropdown
Tooltip
Last updated today
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
1Overlay 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 覆盖层触发器
2Menu 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" 背后的选中高亮
3Tooltip 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 vs. Dropdown Menu vs. Tooltip · 弹出框 vs. 下拉菜单 vs. 工具提示
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/popover-dropdown-tooltip/
**Three anchored overlays with different triggers, content, and dismissal rules**
三种锚定式覆盖层，触发方式、内容和关闭规则各不相同
**Also called / 也叫:** popup, menu, hover hint, toggletip / 弹窗、菜单、悬停提示、开关式提示
## Anatomy — every part, named / 解剖
1. **Overlay trigger · 覆盖层触发器** (`popovertarget`)
“The button the little box is attached to” is the overlay trigger.
“小框挂着的那个按钮”就是覆盖层触发器。
Prompt fragment: the popovertarget overlay trigger that owns and anchors the opened surface
2. **Menu selection highlight · 菜单选中高亮** (`role="menuitem"`)
“The bar behind the dropdown action the arrows are on” is the menu selection highlight.
“方向键停在下拉操作上时背后那条高亮”就是菜单选中高亮。
Prompt fragment: the selection highlight behind the active role="menuitem" in a keyboard-navigable dropdown menu
3. **Tooltip arrow · 工具提示箭头** (`Tooltip.Arrow`)
“The tiny point aiming the hover label at the icon” is the tooltip arrow.
“把悬停标签指向图标的小尖角”就是工具提示箭头。
Prompt fragment: the Radix Tooltip.Arrow pointing from the role="tooltip" hint back to its trigger
## Prompt / 提示词
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 / 调试提示词
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 / 代码里叫什么
- **HTML** `popover`
- **ARIA** `role="tooltip"`
- **ARIA** `role="menu"`
- **Radix** `Popover`
- **Radix** `DropdownMenu`
- **Radix** `Tooltip`
