Filter projects
Popover vs. Dropdown Menu vs. Tooltip
/ popover · role="tooltip" /
also called popup, menu, hover hint, toggletip
A popover opens on click and can contain rich text, controls, or forms; it stays until explicitly or externally dismissed. A dropdown menu also opens on click, but presents a keyboard-navigable list of actions and normally closes after selection. A tooltip is a brief, non-interactive label that appears on hover or keyboard focus and disappears when that trigger is left or blurred.
Anatomy — every part, named
- 1Overlay trigger
popovertarget“The button the little box is attached to” is the overlay trigger.
- 2Menu selection highlight
role="menuitem"“The bar behind the dropdown action the arrows are on” is the menu selection highlight.
- 3Tooltip arrow
Tooltip.Arrow“The tiny point aiming the hover label at the icon” is the tooltip arrow.
Prompt — paste into your agent
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.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | popover | |
| ARIA | role="tooltip" | |
| ARIA | role="menu" | |
| Radix | Popover | |
| Radix | DropdownMenu | |
| Radix | Tooltip |