Navigation
input
Floating
Display

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

Related components