Intro

In this section you will find more information about the following info popover variants:

Info Labels

For situations where additional contextual information is essential to perform an action or understand the UI, Info Labels (custom component) should be used instead of Info Popovers. Info Labels allows the information that would otherwise be contained within an Info Popover to be displayed beside its related object in a more discoverable way.

  1. Info Icon: The info icon should be the --sapContent_NonInteractiveIconColor. The icon font-size is 16px by default with 0.5rem padding between icon and label text.
  2. Info Label Text: The info label text should be short and provide essential instructions that should not be hidden to guide the user in completing their task. The text should not be italicized as there are no supporting variables for italics. Use the Label component for the info label text.

A design annotation showing an info icon used inline within a form as a label companion. Annotation marker 1 identifies the info icon, and marker 2 identifies the associated label text, showing how the icon and text work together to provide inline guidance without requiring a popover interaction.

Info Label beside Input Fields

Browser Tooltips

Info Popovers allow users to pull additional contextual information for a given object (ie. an Info Popover for a story may show the user the story creation date, creator, last modified date, etc.). However, Browser Tooltips should be used in situations where there is a UI element with no descriptors. Examples of situations where browser tooltips are appropriate include:

Refer to the Fiori guidelines for more information on browser tooltips usage.

A design annotation showing a browser-native tooltip triggered on hover over a toolbar button. Annotation marker 1 identifies the trigger element — the Filter button — where the tooltip appears.

Browser Tooltip for Icon Button

do
false

Use the Browser Tooltips:

  • For UI elements without labels
  • For Icon-only button
  • In-place information in a map
  • When showing a button with only an icon and a button
dont
false

Don’t use Browser ToolTips:

  • To replace a label for a form item; a label should always be used
  • If the content of the tooltip is redundant
  • If you want to provide additional information or context, instead use Info Popovers.
  • On column headers of tables

Performance Optimization Popovers

Performance Optimization Popovers are used for providing users with tips related to optimizing their usage of product features. For example, when creating a map on SAC stories, a Performance Optimization Popover may provide a tip on how to optimize the map. These popovers are longer than the standard Info Popovers and the 1-2 sentences rule does not apply.

  1. Performance Icon: Use the performance icon from the fpa-icons library to represent Performance Optimization Popovers. This differentiates these popovers from Info Popovers which are represented by the message-information icon.
  2. Header Text: Performance Optimization Popovers have header text that differentiates them from standard Info Popovers. The header text provides a brief summary of what the performance optimization tip is.

A design annotation showing an informational popover that surfaces a performance tip in context. Annotation marker 1 identifies the icon used to signal the popover type, and marker 2 identifies the title, establishing how icon and title together communicate the nature and urgency of the message.

Performance Optimization Popover

Semantic Popovers

Validation Popovers

Semantic Validation Popovers are used to provide semantic feedback and validation messaging. The popover is triggered by clicking a UI5 Object Status control.

A design annotation showing an error-semantic popover used to communicate a missing or broken dependency. Annotation marker 1 identifies the popover's anchor point (where it attaches to the triggering element), and marker 2 identifies the title, demonstrating how semantic colour and iconography reinforce the error message.

Semantic Popovers - Error

A design annotation showing a warning-semantic popover used to communicate an unsupported configuration. Annotation marker 1 identifies the anchor point, and marker 2 identifies the title, illustrating how the warning semantic signals a non-blocking issue that requires user attention.

Semantic Popovers - Warning

A design annotation showing a success-semantic popover used to confirm a completed action. Annotation marker 1 identifies the anchor point, and marker 2 identifies the title, demonstrating how the success semantic positively reinforces the outcome of a user action.

Semantic Popovers - Success

A design annotation showing an informational-semantic popover used to explain a data model substitution. Annotation marker 1 identifies the anchor point, and marker 2 identifies the title, showing how the info semantic communicates a neutral, non-critical change that users should be aware of.

Semantic Popovers - Informative

  1. Semantic Icon: The ‘status-information icon is used for Semantic Info Popovers, the ‘status-critical’ icon is used for Warning Info Popovers, and the ‘information’ icon is used for Informative Info Popovers. Semantic popovers all use filled-in icons.
  2. Header Text: Describes the context of the error or warning message.

Exceptional Cases

In this section you will find more information about the following topics:

Header Groups: Multiple Messages

In situations where multiple messages are displayed within one popover, headers group these messages together. This is applicable for semantic popovers as well. Rather than using the Message Popover component, a popover with various messages should have an icon+header for each respective message.

A design annotation showing an error-state info popover containing two stacked error messages. The spacing between messages is annotated as 1rem, establishing the layout rule for multi-message popovers. Each message has its own title and explanatory body text.

Semantic Error Popover with Header Groups

Token Popovers

Token Popovers are specific to the token component. These popovers include an arrow and is placed directly around the token component.

  1. Icon Control: The icon resides in the trailing container of the data token. Hovering over the icon will open the popover.
  2. Popover: The popover is aligned with the data token component.

A design annotation showing an error-state info popover triggered from an inline token within a form row. Annotation marker 1 identifies the error icon on the token (the trigger), and marker 2 identifies the popover body, illustrating the relationship between an in-context error indicator and the popover it opens.

Semantic Error Popover within a Token

Popovers with Forms

These popovers have their content consist of an object’s metadata. The metadata is represented via a form with labels and text controls.

  1. Header: Optional element that provides more context to the user on what the popover is for.
  2. Label: The content of the Info Popover is a list of Form Items with a Label and a Text control.

A design annotation showing an info popover used to surface contextual metadata about a data source within a configuration panel. Annotation marker 1 identifies the popover title (the model name), and marker 2 identifies the description and file path details shown in the popover body.

Semantic Error Popover within a Token

These popovers contain a Link control that directs users to another page or tab. These are for popovers that contain brief information that may need more context.

  1. Link: Directs the user to a location with more contextual information for the Info Popover’s content. Usually has text reading ‘Learn More...’ or ‘See More...’.

A design annotation showing an error-state info popover that includes an inline "Learn More" link alongside the message title and body text. Annotation marker 1 identifies the link element, demonstrating that popovers can contain actionable navigation in addition to descriptive content.

Info Popover for a Data Token

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.