component · web-platform
Popover
also called flyout
A small surface anchored to the control that opened it, holding content or controls of its own, and dismissed by clicking away or pressing Escape.
A popover is anchored and interactive. Those two properties are what separate it from its neighbours: it points at the thing that opened it, and you can put a button, a form, or a list inside it.
The word gets used for a tooltip more often than any other mix-up on this site. The test is simple: if the surface only describes the control and disappears the moment the pointer leaves, it is a tooltip. If you are expected to reach into it, it is a popover. A tooltip you can click is a popover with a tooltip’s manners, and it will fail for keyboard and touch users.
The web platform has taken this over. The popover attribute plus CSS anchor
positioning give you the top layer, light dismiss, and anchoring without a
positioning library, which is why most of what libraries used to provide here is
now a few lines of markup.
Which word?
| If you want | say |
|---|---|
| a small anchored surface with controls inside it | popover |
| a label that names the control under the pointer | tooltip |
| a window that blocks the page until it is dealt with | modal dialog |
| a hint you click open, not hover open | toggletip |
| a rich preview that opens on hover, not on click | hover card |
Related
Variants: Popconfirm
Contains: Popover arrow
See also: Kebab menu · Has popup
Implementations
Specimens illustrate the concept; for production use, start here.
| radix | Popover |
| base-ui | Popover |
| shadcn | Popover |
| hig | Popovers |