Popover

Usage

Popover is an overlay that opens on demand after clicking on the trigger. Popover allows to expose extra information or functionality to the user. It should always open next to the trigger.

Best practices

Do

Use the popover to expose a small amount of additional functionality or information to the user.

Don't

Do not use the popover if content can be shown directly or if the information is vital for using the screen.

Don't

Don’t use popovers for simple labeling i.e. providing a label for the icon button. Use a tooltip instead.

Don't

Don’t use popovers to show a list of actions. Use the dropdown menu instead.

Anatomy

Trigger slot

This area is designated for the trigger. When clicked, a popover will open. Hovering is not a supported trigger event.

Do

Use buttons or elements that users expect to be clickable as triggers.

Don't

Do not use links or non-interactive elements (icons, text, images) as triggers.

Content slot

This area is designated for the content of the popover.

Do

• Focus on one context or functionality only.
• Use edge-to-edge dividers to separate sections inside.

Don't

• Don’t nest popovers inside each other.
• Do not resize the popover arbitrarily. Adjust its dimensions to the content inside.

Positioning

The popover should always be placed next to the trigger and aligned to one of its edges.

Examples

Live Preview

Props

Slots

Events