Popover

A popover is a non-modal dialog that appears when a user clicks a trigger element. It's used to display additional information or a set of related actions in a small container that is attached to the trigger.

When to use

Action menus

Use a popover to display a list of actions when a user clicks a button, such as a "Share" or "Filter" button.

Action menus

Use a popover to display a list of actions when a user clicks a button, such as a "Share" or "Filter" button.

Interactive information

It's ideal for showing content that includes interactive elements, like buttons, links, or simple form controls.

Interactive information

It's ideal for showing content that includes interactive elements, like buttons, links, or simple form controls.

Mobile context menus

On touch devices, popovers are a great way to reveal information or actions that would be shown in a hover card on desktop.

Mobile context menus

On touch devices, popovers are a great way to reveal information or actions that would be shown in a hover card on desktop.

When to avoid

On hover

If the content should be revealed by hovering, use a tooltip (for simple text) or a hover card (for richer, non-interactive content). A popover should always be triggered by a click.

On hover

If the content should be revealed by hovering, use a tooltip (for simple text) or a hover card (for richer, non-interactive content). A popover should always be triggered by a click.

Critical information

For critical information, warnings, or complex forms that require the user's full attention, use a modal dialog instead.

Critical information

For critical information, warnings, or complex forms that require the user's full attention, use a modal dialog instead.

Primary navigation

A dedicated menu or navigation bar is more appropriate.

Primary navigation

A dedicated menu or navigation bar is more appropriate.

Specifications

Position

Top

Left

Right

Bottom

Top

Left

Right

Bottom

Top

Left

Right

Bottom

Top

Left

Right

Bottom

Beak alignment

Start

Middle

End

Content types

Text

Custom

Text

Custom

Text

Custom

Text

Custom

Behavior

Trigger

The popover must appear on a user click or tap.

Dismissal

The popover should close when the user clicks outside of it, clicks the trigger element again, or presses the "Esc" key.

Focus management

For accessibility, when the popover opens, keyboard focus should move to the first interactive element inside it. When it closes, focus should return to the original trigger element.

Anatomy