Library / UI components / Popover
No. 007·noun·also called flyout, popup panel

Popover

A small floating panel attached to a button, opened with a click, holding a few extra options or details.

SPECIMEN · LIVE DEMO
Definition

What it is

A popover is a small panel that appears next to the thing you clicked, pointing back at it. It can hold a short form, a set of options, or extra detail, and closes when you click elsewhere.

Use popovers for lightweight, in-context tasks: picking a date, choosing a color, seeing who's on a project. Because they're anchored, people understand what they relate to.

A popover opens on click and can contain controls. A tooltip opens on hover and only shows a short label. A modal is larger, centered, and blocks the page.

Say it like a builder

How to ask for it

Vague

“When you click the little calendar icon a small thing should appear to choose the date.”

Precise

“Clicking the calendar icon opens a date picker popover anchored below the field. Selecting a date fills the field and closes the popover; clicking outside closes it without changes.”

Why it works

"A small thing should appear" could be a modal or a new page; "popover" names an anchored floating panel and the prompt says how it closes.

In the wild

You've seen this in

  • SThe emoji reaction picker in Slack
  • GThe date picker on a Google Calendar event
  • FFigma's color picker
Usage note

Often confused with

TooltipA tooltip appears on hover and only shows text; a popover opens on click and can hold controls.ModalA modal is centered and blocks everything; a popover is small and stays next to its button.DropdownA dropdown is a list of choices; a popover can hold anything.