The responsive popover displays as a popover on desktop and tablet devices but as a dialog on phones.

Responsive popover – live example

When to Use

Use the responsive popover:

• To define your own structure.
• To show a dialog on phones.

Don’t use the responsive popover:

• To show a popover on phones. Use the popover component instead.

Anatomy

Popover (Desktop, Tablet)

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, desktop/tablet only): 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

See Popover – Behavior and Interaction.

Responsive Behavior

On a phone, the responsive popover displays as a dialog.

Related Links