Popover
Displays a floating panel that is anchored to another UI element. It can be implicitly dismissed by clicking/tapping outside it.
Code component(s): Popover
Unlike Tooltip, popovers stay visible until they are dismissed. They can either be implicitly dismissed by clicking/tapping outside it, or explicitly dismissed via some other action (eg, clicking/tapping on a button inside the popover).
Popovers can appear programmatically (eg, as part of a guided tutorial) or via some user action (eg, clicking/tapping on a button), but they must always be anchored to a target element (the element the tail of the popover points to).
Anatomy
Options
Target
The element that the popover’s tail points to. The tail direction will automatically be adjusted to try to keep the tooltip visible regardless of the target’s position in the viewport.
Content
You can provide any content you’d like, including interactive elements. However, we recommend that you use the predefined patterns when possible.
Size
Specify if/how this component resizes horizontally and vertically
Patterns
While you can provide whatever content you’d like, we recommend using one of the following patterns if possible. The dismiss button on the top right of these patterns can be optionally omitted.
Title + Description
This is the simplest layout available
Icon + Title + Description
For greater visual prominence, use an icon
Illustration + Title + Description
For even greater visual prominence, use an illustration
Toolbar
This pattern can be use with any of the layout patterns above to provide a consistent place for interactive controls
Guidelines
Only show one popover at a time
Since popovers are meant to be prominent, transient experiences—give each one priority while it’s visible and do not show multiple popovers simultaneously
