Updated: July 16, 2024

Responsive Popover

ui5-responsive-popover | v1.0

Intro

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

Do

Use the responsive popover:

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

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.
Anatomy of a responsive popover
Anatomy of a responsive popover

Behavior and Interaction

Responsive Behavior

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

The responsive popover is shown as a dialog on a phone.
The responsive popover is shown as a dialog on a phone.

Related Links

Components

Implementation