Popover
A small overlay anchored to the control that opened it, holding content or actions without blocking the page.
UI ComponentsA popover is opened deliberately by a click, stays until dismissed, and can hold interactive content — a short form, a set of actions, a colour picker, a filter. That makes it different from a tooltip, which appears on hover, holds only text, and must never contain anything clickable, because a hover-triggered element is unreachable for touch and keyboard users trying to click inside it.
Positioning is where popovers fail in production. The overlay must flip when it would fall off the viewport, stay attached during scroll, and not get clipped by a parent with `overflow: hidden` — which is why most implementations render into a portal. Focus should move in on open and return to the trigger on close, and Escape should dismiss.
Popover vs modal
A popover is anchored and non-blocking; a modal is centred and blocks everything. If the content is long, needs its own scroll, or demands a decision before anything else, it is not a popover.
In practice
A reporting tool put its column picker in a popover rendered inside the table's scroll container. On tables wide enough to scroll, the popover was clipped and the last three checkboxes were unreachable. Rendering it in a portal with viewport collision detection fixed a bug that had been filed as “cannot hide columns”.
Where teams get it wrong
- Popovers clipped by an ancestor's overflow, cutting off content.
- No flip or shift when the popover would leave the viewport.
- Interactive content in a hover-triggered element.
- No focus management and no Escape to close.
- Popovers on mobile where a bottom sheet fits the screen and the thumb far better.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a popover and a tooltip?
A tooltip appears on hover or focus and contains only short explanatory text. A popover is opened by a click, persists until dismissed, and can contain controls. Anything clickable belongs in a popover.
When should you use a popover instead of a modal?
When the content is small, closely tied to the control that opened it, and does not need to block the page. Long content, its own scroll, or a decision that must be answered first all mean a modal.
Related terms
All terms- TooltipA small label appearing on hover or focus that explains a control without taking permanent space in the interface.
- Modal DesignDesigning dialogs that block the page to demand a decision — when one is justified, what it must contain, and how a person gets out.
- Drawer (UI)A panel that slides in from an edge and leaves the page behind it visible — for work that needs the context it came from.
- Dropdown (UI)A control that reveals a list on demand — either for selecting a value or for offering a menu of actions.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us