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).
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.
You can provide any content you’d like, including interactive elements. However, we recommend that you use the predefined patterns when possible.
Specify if/how this component resizes horizontally and vertically
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.
This is the simplest layout available
For greater visual prominence, use an icon
For even greater visual prominence, use an illustration
This pattern can be use with any of the layout patterns above to provide a consistent place for interactive controls
Since popovers are meant to be prominent, transient experiences—give each one priority while it’s visible and do not show multiple popovers simultaneously