A popover is a small overlay window that appears on top of the existing content. It is used to provide additional information and options without requiring the user to navigate away from the current page or interrupt their workflow.

Popover –  live example

When to Use

Use a popover:

• If you need to define your own structure.
• If you have very little content.

Don’t use a popover:

• If the content takes up more than a third of the screen real estate on phones. Use the responsive popover instead.
• To show details for a list item in list-detail layouts.
• If a user action or confirmation is required before processing can continue. In this case, use a dialog.

Anatomy

1. Title (optional): Including a title also improves accessibility for screen reader users.
2. Content area:  Can contain any component. Ensure that the content has a basic design and shows only the most important information.
3. Arrow (optional): By default, the popover has an arrow that connects it visually to the triggering component. You can opt to hide the arrow.
4. Footer (optional): Contains one or more actions.

Behavior and Interaction

Opening and Closing a Popover

The popover opens when the user clicks on a triggering text link or button. The popover appears next to the trigger component, but doesn’t obscure it.

The popover closes when the user clicks outside the popover or selects an action within the popover.

Opening and closing a popover – live example

Placement Types

You can define how the popover is positioned in relation to its trigger.

Available options:

• Left
• Right (default)
• Top
• Bottom

The position and direction of the arrow adapt to the placement type.

Popover to the right of the trigger (default), arrow hidden – live example

Popover beneath the trigger, with arrow – live example

Responsive Behavior

The popover component always shows a popover, regardless of the form factor. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate. If you need to include more content, use a responsive popover.

Related Links