Intro
The popover is a small overlay window that appears on top of an existing UI element. It 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
Component availability
This component is available in the following libraries:
When to Use
Use the popover to:
- Define a custom structure when the quick view component does not meet the requirements.
- Show UI elements that are not supported by the quick view component.
- Display lightweight, contextual content.
- Show details for a list item, contact information, or a short preview without leaving the current view.
- Let users stay in context while viewing or editing related information.
- Present content that is directly related to a specific UI element.
- Provide quick, non-disruptive actions without navigating away.
Don’t use a popover to:
- Display content that is better suited for a quick view component.
- Display object details in a list-detail layout (these details belong in the dedicated details area).
- Display content that requires full user focus or involves complex interaction.
- Interrupt the user's flow by requiring explicit input or confirmation. Instead, use a dialog.
- Create modal behavior where the background is not interactive. Instead, use a dialog.
- Provide information that is not directly related to a specific UI element.
- Present content that takes up more than one-third of the phone screen. Use a responsive popover instead.
- Show large or scroll-heavy content.
- Include a header or footer when the popover needs a title or action. Leave them out if the content is clarified by the context provided by the triggering element, is clear on its own, or doesn't require any action.
- Place the popover directly beside its trigger element, keeping the trigger visible so the relationship is obvious.
- Ensure the popover can be dismissed based on your scenario: by clicking outside of it, re-clicking its trigger, or by selecting an action within it, and make sure user focus returns to the trigger element afterward.
- Use popovers for navigation flows when showing nested details.
- Consider using responsive popovers for larger screens where full-screen display and touch interactions are supported.
Anatomy
- Header (optional): Contains a title and a back button when navigation is available.
- Content area: Can contain any component.
- Resize handle (optional): The resize handle is visible when the popover is resizable.
- Footer (optional): Contains one or more actions.
- Arrow (optional): Visually connects the popover to its trigger element.
Anatomy of a popover
Types
Popover with or without header and footer
The popover can include a header, a footer, or both. A header and footer are useful if you need to contextualize the information with a title or add any actions to the footer (A). In contrast, a popover without a header or footer is ideal for simple content that is already clarified by the surrounding context provided by the triggering element, is inherently clear, and doesn't require a title or additional actions (B).
Examples of popovers with a header and footer, and without either
Popover with a custom header
A popover with a custom header is useful when the standard header doesn't meet specific application requirements. You can place any component inside a custom header, such as adding an alternative way to dismiss the popover using a Close button at the end of the header (A). Additionally, you can use a header that provides back navigation to a previous page. In this scenario, you might also include options for additional actions at the end of the header (B).
Examples of a popover with custom headers
Popover with a subheader
The popover can include an additional subheader that may contain any component (A). It is also possible to use the popover without a main header, having only the subheader instead (B).
Popover with both a header and a subheader, and another with only a subheader
States
The popover doesn’t have its own states. When the popover opens, focus moves to the first interactive element within it. Initial focus can be configured to land on a specific element.
Focus State
The focus state determines which component receives the user input when using an input device, for example, a keyboard.
A. Focus state: Appears with a visible outline around the interactive element, for example, a button.
B. Unfocused state: Applies to all elements that are not focused.
A popover with both focused and unfocused buttons
For more information, see Focus States.
Behavior and Interaction
Opening a popover
A popover opens when users click the element that triggers it, such as a link or button. The popover then positions itself next to the trigger element, ensuring the trigger element remains visible and accessible. This behavior is typically designed to maintain context for the user, allowing users to still see that element and click it again if needed.
Hovering over the trigger element displays the hover state before opening the popover (A). Clicking the trigger opens the popover (B).
Opening a popover when clicking a button
Closing a popover
The popover can be dismissed as follows: by clicking outside its boundaries (A), by clicking the trigger element again (B), or by selecting an action within the popover (C). When the popover closes, focus returns to its trigger element.
Closing a popover by clicking outside of it, on the trigger element, or by clicking a “Cancel” button
Navigation flow
The popover supports a navigation flow when additional details or nested content are needed for a selected item.
Clicking the trigger element (A) opens the popover as an overlay (B), displaying the content within while keeping the trigger visible.
Opening a popover and selecting an item
The selected item (B) reveals its detailed view (C) with a back arrow button in the header. The content area provides contextually relevant information. Clicking on the back arrow (C) returns to the full list view (D), allowing users to select a different item.
Clicking on the back arrow button, the popover displays the full list again
Resizing a popover :badge, info, large, _, SAPUI5 only:
A popover can be resizable, depending on the implementation. When resizing is enabled, a handle, such as one in the bottom-right corner, appears, allowing the user to drag and adjust the popover’s dimensions.
Resizing a popover
Responsiveness
The popover behaves differently on mobile phones than on tablet and desktop devices.
Desktop and tablet devices: Opens as a standard-sized popover.
Mobile phones: Opens as a full-screen dialog. This behavior applies to both portrait and landscape orientations.
Touch devices: Touch interactions work similarly to mouse interactions: tap gestures open and close the popover, while drag gestures resize it.
Responsive popover on a mobile phone
Accessibility
SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.
For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.
Keyboard Navigation
The following keyboard combinations are supported by the SAPUI5 Popover component.
Screen Reader Support
For additional details on screen reader support and Accessible Rich Internet Applications (ARIA), see UI5 Screen Reader Support and WAI-ARIA Authoring.
Content
Localization
Popover supports both left-to-right (LTR) and right-to-left (RTL) reading directions. The layout automatically mirrors to match the language direction.
Left-to-right text directions
Right-to-left text directions
Features
Placement
A popover can appear without an arrow (A) or with an arrow (pointing left, right, top, or bottom) to visually connect to the trigger element (B).
Arrow placement options
Resize handle positioning
The resize handle is always positioned on the opposite side of the arrow to maintain usability and prevent visual interference. When the arrow is centered on any side of the popover, the handle appears in the opposite corner. The exact placement (up/down or left/right) depends on the initial position of the arrow, ensuring optimal interaction space and clear visual separation between the arrow and the resize handle.
The arrow is positioned at the left (A) and top (B), with the resize handle appearing on the opposite side
Modal behavior
Modal behavior determines whether clicking outside the popover closes it or leaves it open. If modal behavior is disabled, clicking anywhere outside the popover automatically closes it. If enabled, outside clicks are ignored, and the popover remains open. In this case, it can only be dismissed via an available action within the popover or by activating a trigger element, such as a button or link.
Framework Comparison
Some behaviors differ between frameworks due to implementation specifics. The table below summarizes the differences between SAPUI5 and SAP Web Components and lists the framework-specific patterns.
[internal_only]To request this feature for SAP Web Components, submit an InnerSource request.[/internal_only]
Related Links
Guidelines
Components
Quick View
Guidelines
Components
Quick View
UI Kit (Figma)
SAP Fiori for Web UI Kit / Popover