Popover

Popovers are non-blocking, mini-modal-dialogs that show a small form or piece of rich or related data for a specific element on the screen. They are not to be confused with tooltips, which are text-only content with no actions within.

Popovers are used to provide contextual snippets of rich information, menu options, and lightweight editing. They are not meant to handle massive forms or screen flows.

Popovers can stack on top of other popovers and modals, provided they are launched from that popover or modal.

On hover

In this example, the popover target element is a text component. The popover displays when the user hovers over the element with their mouse.

On click

In this example, the popover target element is a button component. The popover displays when the user clicks the button.

Groups

By default, multiple popovers are allowed to appear on the screen at any given time.

Sticky or detached

A sticky popover extends directly from the action that launched it and points toward it once triggered.

Headers

Popovers can be configured with or without headers, using long or short header text.

Dismiss

Dismissible popovers can be exited using the “X” at the top right of the popover.