On this page
Overview
Show code, DocumentDetails.tsx
Variants
Widths
A popover is as wide as its content, within its width's range.
- Medium
Details and a field or two. The default.
- Large
A longer form.
Sides
A popover opens below its trigger, above it or beside it, lined up with the trigger's start, center or end, and flips where there is no room.
Still picture, not live
Show code, FieldHelp.tsx
Anatomy
Popover
Title
Content
Trigger
Show code, PopoverAnatomy.tsx
Behaviour
Focus
Popover takes focus as it opens, and also closes when focus leaves it.
- It isn't modal, so the page stays usable.
A small form
An action inside the popover closes it once its work is done, such as Rename.
Show code, RenameInPlace.tsx
Rules
A popover is small, named, and never the only place for what matters.
Use it when
- Details people open on demand, such as a document's history
- A small form beside the control it changes, such as a rename
- An explanation behind a help mark beside a value
Fields
One to three fields at most, with the action last.
Names
Give every popover a title, or a name for assistive technology where a title would repeat its trigger.
- Name an icon-only trigger after what the popover holds, such as About billing periods.
Accessibility
| Key | Action |
|---|---|
| Enter or Space on the trigger | Opens the popover and moves focus in; on an open popover's trigger, closes it. |
| Tab, Shift+Tab | Moves through the popover; past its last element it closes and moves on. |
| Esc | Closes the popover and returns focus to the trigger. |