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.

If you called it…

“the little box attached to a button”“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”“the menu that appears when you click the three dots”

…you meant a popover vs. dropdown menu vs. tooltip.

Anatomy — every part, named

1
Overlay triggerpopovertarget
“The button the little box is attached to” is the overlay trigger.
2
Menu selection highlightrole="menuitem"
“The bar behind the dropdown action the arrows are on” is the menu selection highlight.
3
Tooltip arrowTooltip.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.

Debug prompt — when it misbehaves

Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.

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:

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`

If you called it…

Anatomy — every part, named

Prompt — paste into your agent

Debug prompt — when it misbehaves

In code

See also

Search