Intro

The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.

Popover

Note: The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering. Check first whether the quick view is appropriate for your use case.

When to Use

2
do
false

Use a popover if:

  • You need to define your own structure.
  • You want to show UI elements that are not available with the quick view.
dont
false

Don’t use a popover if:

  • The quick view is more appropriate for your use case.
  • The objects are in the list in a list-detail layout (in this case, the details are shown in the details area).

Anatomy

  1. Header (optional): Contains a back button (for navigation) and a title. 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. Resize handle (optional): The popover can be resized when the resizable property is enabled.
  4. Footer (optional): Contains one or more actions.
  5. Arrow (optional): By default, the popover has an arrow that connects it visually to the triggering component. You can opt to hide the arrow.

Anatomy of a popover

guideline

  • If you do not show a title, use the invisible text control (sap.ui.core.InvisibleText) to set a text for screen reader support.

  • In the content section:

    • Use no more than two groups.
    • Limit the total number of fields to eight.
    • Use single-column tables.
    • Use micro charts.

  • Show status information as text fields in a content group. Use semantic text colors to reflect meaning.

  • You can define a fixed height for the popover. If the content exceeds this height, a scrollbar appears automatically.

Types

Popover - sap.m.Popover

The standard popover component (sap.m.Popover) renders as a popover on all device types. It’s well suited for simple, lightweight content that doesn’t require responsive behavior.

Popover on desktop, tablet, and smartphone

Responsive Popover - sap.m.ResponsivePopover

Shows a popover on a tablet or desktop and a dialog on smartphones.

Responsive popover on tablet or desktop

Responsive popover on smartphone

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

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

Opening and closing a popover

Placement

The placement type defines how the popover will be positioned on the screen in relation to its trigger. The default placement is “Right”: the popover appears to the right of the object it relates to.

If you set the placement type to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.

Popover with default placement type - right

hint
More information on the different placement types can be found here.

The popover in modal mode opens in a modal window, which blocks the whole screen and attracts the user’s attention.

Use the modal mode only if you want to prompt the user to make a decision or confirm an action. Ensure that the user can close the popover by offering an action button in the footer.

Popover – modal

Responsiveness

The popover component (sap.m.Popover) always displays a popover, regardless of the form factor. Only use a non-responsive popover if it contains minimal content.

On smartphones, the popover should not occupy more than a third of the phone’s screen. If you need to display more content, use the responsive popover (sap.m.ResponsivePopover), which automatically opens as a dialog on smartphones for improved usability.

Localization

The popover supports left-to-right (LTR) and right-to-left (RTL) reading directions.

Popover – left-to-right

Popover – right-to-left

Elements and Controls

Implementation

Visual Design

  • Popover (visual design specification)

Elements and Controls

Implementation