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.

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


This pattern can be use with any of the layout patterns above to provide a consistent place for interactive controls


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

Related components

We'll soon be deprecating this site. For the latest version of our documentation, go to our Storybook site!