Intro

The Info Popover component provides additional information for an individual UI element at a glance, without disrupting the user's workflow.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=27346-43898&t=ngp68S9PAD2z4nWt-4

When to Use

do
false

Use the Info Popover:

  • To provide additional information for an individual UI element, at a glance, without disrupting the user's workflow or having them leave the page.
  • To provide additional context only when the user needs it (progressive disclosure).
  • To clarify something to the user, but you don’t have enough space in the UI.
  • To show UI elements not available in quick view.
dont
false

Don’t use the Info Popover:

  • For actionable tasks such as confirming a successful action, confirming a deletion, etc.
  • To hide essential information within info popovers.
  • When the quick view is more appropriate for your use case
  • When the objects are in the list in a list-detail layout (ie. the information will be in the details).
  • When the UI is self-evident and does not need additional descriptions.
  • If there are already a lot of icon popovers in your UI. Don’t overuse info popovers and instead see if its UX can be improved to mitigate usage of info popovers.

Top Tips

Anatomy

  1. Icon Control: Opens the popover on click. The component used for the Info Popover is a clickable Icon Control. The target area of the icon control is 16x16px.
  2. Text: The text within an info popover should be 1-2 sentences long. For situations with longer text, refer to the documentation here. The component used for the Info Popover is a Text Control. As the content of the text is long and continuous, the line height should use the variable: --sapContent_LineHeight (1.5rem).
  3. Popover: The popover component contains the help text for the info popover. The height of the popover will adjust to the length of the text. The spacing between popover control and icon control (including icon padding) is 0rem. The component used for the Info Popover is a Popover.

An open info popover with three numbered callouts identifying its structural parts. Indicator 1 identifies the Icon Control, a clickable icon that opens the popover on click. Indicator 2 identifies the Popover text, and Indicator 3 identifies the Popover container area and adjusts its height to fit the text content.

Info Popover - Anatomy

Position

The position of the popover respective to the icon control should follow the same pattern as the Popover component. The default popover position is to the right of the object it is related to. If development sets the placement type to ‘Auto’, it will automatically decide the placement based on the location of the related object and available space on the screen.

Four-panel diagram showing the four supported directional positions of the info popover relative to its trigger icon. Top-left: popover opens to the right. Top-right: popover opens to the left. Bottom-left: popover opens below. Bottom-right: popover opens above. This communicates that the component supports all four directional variants to accommodate different layout constraints.

Info Popover - Positions

Placement

Do

Info Popovers are placed beside a sentence of block of text. These cases include:

  • Beside input labels (after the colon and asterisk)
  • Beside headers
  • Beside checkboxes
  • Beside radio button group labels

Don't

Don't place Info Popovers:

  • Beside input fields (they should be beside the input field labels)
  • Beside individual radio buttons (keyboard navigation is not feasible)
  • Within menus

Beside Input Labels

Three stacked form fields, each with a label and text input. The info icon is placed directly after the first field's label text with a "0.5rem" spacing annotation, and the popover is shown open to the upper right.

Info Popover beside Input Label

Beside Headers

A form section with a bold "Header Title" and three labeled input fields below it. The info icon is placed directly after the header text with a "0.5rem" spacing annotation, and the popover is shown open to the upper right with body text.

Info Popover beside Header

Beside Checkboxes

Two labeled checkboxes, each with an info icon placed directly after the label text. The first icon is active, showing a popover. A spacing annotation reads "0.5rem," indicating the gap between the label and the icon.

Info Popover beside Checkboxes

Beside Radio Button Group Label

Radio Buttons already have special keyboard handling where a tab chain exists for all radio buttons within a group. The radio button group does not distinguish between focus and selection making it impossible to have an ‘inner’ focus on the info icon.

To address this issue, the solution we have for using icon popovers for radio button groups is to have one single icon popover dedicated to the entire radio button group. Within this popover, information for each of the radio buttons are provided. This is one of the few exceptions the popover text length will exceed 1-2 sentences. The popover height will automatically adjust to the length of the popover text. An example of this solution is shown below:

A radio button group with three options. The info icon follows the group label with a "0.5rem" spacing annotation, and the popover is open to the right showing structured content: three sections, each with a bold heading and short description. A highlighted band and a "1rem" annotation indicate the vertical spacing between sections inside the popover. This communicates that the info icon at group label level describes all options collectively, and that multi-section popover content uses 1rem spacing between sections.

Info Popover beside Radio Button Group Header

Behavior and Interaction

Opening an Info Popover

The user opens a popover by hovering over the Info Popover icon. Refer to the accessibility specs to see keyboard navigation patterns for the Info Popover.

A circular info icon is shown with a cursor positioned over it and a green "hover" label nearby. This communicates the trigger condition: hovering the info icon opens the popover.

Opening an Info Popover

Closing an Info Popover

The popover is closed when the user’s mouse leaves the icon target area. Refer to the accessibility specs to see keyboard navigation patterns for the Info Popover.

An open info popover is shown with the cursor moved away from the component area, accompanied by an orange "mouse leave" label. This communicates the dismissal condition: the popover closes automatically when the cursor leaves the component.

Closing an Info Popover

UI Text Recommendations

Do

  • Text in info popovers should be limited to 1-2 sentences; keep it concise! If longer, a more appropriate component should be used such as Message Box or Quick View Cards.
  • Use people-centric language; avoid jargon.

Don't

  • Write long paragraphs filled with complex language.
  • Repeat text that can be referred to larger documentation.

Exceptional Cases

Info Popovers within Menus

Avoid using info popovers within menus. However, if necessary, use Custom List Items (‹ui5-li-custom›) instead of standard menu items when placing info popovers within menus. This ensures the Info Icon can be navigated to via keyboard. When using the custom list item component in UI5, developers would need to add a ‘tooltip’ property for the list item to create an info popover. To reference keyboard navigation for icon popovers within menus, refer to the documentation.

  1. ‹ui5-menu›: See docs.
  2. ‹ui5-li-item›: The custom list item component should be nested in within the menu component for menu items that require an info popover. A ‘tooltip’ property should be turned on when adding an info popover to a menu item. See docs.
  3. ‹ui5-popover›: See docs.
  4. ‹ui5-icon›: See docs.

An info popover used inline within a dropdown menu, with four numbered callouts. Indicator 1 marks the menu container. Indicator 2 marks the menu list item. The info icon appears next to the "Share Location" menu item, with the popover open to the right — Indicator 3 marks the popover content area. Indicator 4 marks the menu icon.

Info Popovers within Menus using Custom List Items

Resizing Behaviour

It is recommended to have messages that are 1-2 sentences long within info popovers. However, in situations that may need longer messages, providing the user ways to resize the popover is recommended. Resizing behaviour allows popovers to be made smaller to show more of the screen content or larger to view the entire popover message.

  1. Scroll Bar: If the popover content is too large to fit within the default dimensions of the info popover, a scroll bar will appear for the user to scroll through the entire popover content.
  2. Truncation: Truncation indicates to the user that there is more content in the popover that can only be viewed if the user resizes the popover or scrolls down.
  3. Resize Handle: After a certain breakpoint (height: 25rem), a resize handle should appear. The resize handle consists of the icon resize-corner which indicates to the user they can drag the popover to resize the popover. For documentation on the resize handle placement, refer to the documentation here.

An open info popover with overflowing content, annotated with three numbered callouts. The panel displays two paragraphs of body text with a visible vertical scrollbar. A resize handle at the bottom-right corner is labelled "drag" with a diagonal arrow cursor. Indicator 1 marks the scroll bar. Indicator 2 marks the overflow boundary near the truncated text. Indicator 3 marks the resize handle. This communicates that when content exceeds the panel height, the popover becomes scrollable, and users can resize it by dragging the corner handle.

Resize Handle for Info Popovers

Info popovers are recommended to only contain simple text messages. However, there are info popovers that exist that use footer actions. These footer actions are used in situations where the info popover provides a brief summary of an object and the footer action may include a button that directs the user to the object itself for more context.

  1. Footer: The footer section of the info popover is used if there is a need to contain an action within the info popover.
  2. Footer Action: The footer action comes in the form of a Button component usually that directs the user to a more elaborate version of the info popover’s content. Refer to the Fiori guidelines more information.

An open info popover with a footer area, annotated with two numbered callouts. Indicator 1 marks the right edge of the panel at the footer level. Indicator 2 marks the footer action. This communicates that the info popover supports an optional footer with a navigational action, allowing users to access more detailed information.

Info Popover with Footer Actions

Localization

The Info Popover should be mirrored for RTL languages. This includes the way the text within the popover is written along with the arrow position and where the popover is displayed respective to the icon control.