Components/Overlays
Popover
Popovers open next to the control that triggered them, with room for a title, content and actions
Playground
Step through the tour with the footer, close it, then open it again from its trigger
Placement
Twelve arrow positions, three per side. The arrow points at the trigger; pick the side with the most room
Add people by email. They get edit access to this project only.
Add people by email. They get edit access to this project only.
Add people by email. They get edit access to this project only.
Add people by email. They get edit access to this project only.
Sizes
Medium for most popovers, Small for dense toolbars and side panels
Add people by email. They get edit access to this project only.
Add people by email. They get edit access to this project only.
When to use
Use when
- Extra content belongs to one control, like filters behind a button
- A product tour points at features one by one
- People should keep seeing the page while they read or act
Avoid when
- It only names or hints at a control, use a Tooltip
- People must decide before going on, use a Modal
- The content is long or needs scrolling, give it a page or a panel
Do and don’t
Filter by owner, date or type.
Open it next to its trigger with the arrow pointing back, so people see what it belongs to
Filter by owner, date or type.
Don’t float a popover without an arrow far from its trigger, it reads like a modal without an overlay