Intro
These visual specifications should serve as a guideline for Front-End Developers on how implement this control.
Standard Info Popover
| Value | Description | Details |
| A | Icon Control | Native UI5: Icon Icon: sap-icon://message-information Font-size: 1rem Color: --sapButton_IconColor Padding: 0rem Margin: 0rem |
| B | Popover | Native UI5: Popover Background color: --sapGroup_ContentBackground Border: None Border-radius: --sapPopover_BorderCornerRadius Padding: 1rem Max-width: 22rem Popover arrow: Visible |
| C | Text | Native UI5: Text Line-height: --sapContent_LineHeight |
Performance Optimization Popover
| Value | Description | Details |
| A | Popover | Native UI5: Popover Background color: --sapGroup_ContentBackground Border: None Border-radius: --sapPopover_BorderCornerRadius Padding: 1rem Max-width: 22rem (responsive to content+padding) Max-height before scroll: 15.5rem (responsive to content+padding) Popover arrow: Visible |
| B | Popover Icon Control | Native UI5: Popover Icon default color: --sapButton_Lite_TextColor Icon: fpa-icon://performance Border: None Border-radius: --sapPopover_BorderCornerRadius Padding: 1rem Max-width: 22rem Popover arrow: Visible Width: 1rem Height: 1rem Left-padding: 0rem Right-padding: 0.75rem Top-padding: 0rem |
| C | Header | Native UI5: Title Font-family: @sapUiFontHeaderFamily Font-size: @sapMFontHeader6Size Line-height: Auto Icon+text alignment: Vertically-Aligned |
| D | Icon Control | Native UI5: Icon Icon default color: --sapButton_Lite_TextColor Icon: fpa-icon://performance Width: 1rem Height: 1rem Padding: 0rem Line-height: --sapContent_LineHeight |
| E | Text | Native UI5: Text Line-height: --sapContent_LineHeight Padding-top: 0.5rem |
Semantic Popover
| Value | Description | Details |
| A | Popover | Native UI5: Popover Background color: --sapGroup_ContentBackground Border: None Border-radius: --sapPopover_BorderCornerRadius Padding: 1rem Max-width: 22rem (responsive to content+padding) Max-height before scroll: 15.5rem (responsive to content+padding) Popover arrow: Visible |
| B | Popover Icon Control | Native UI5: Popover Icon default color: Object Status Colors Icons: sap-icon://status-error, sap-icon://status-critical, sap-icon://status-success, sap-icon://information Border: None Border-radius: --sapPopover_BorderCornerRadius Padding: 1rem Max-width: 22rem Popover arrow: Visible Width: 1rem Height: 1rem Left-padding: 0rem Right-padding: 0.75rem Top-padding: 0rem |
| C | Header | Native UI5: Title Font-family: @sapUiFontHeaderFamily Font-size: @sapMFontHeader6Size Line-height: Auto Icon+text alignment: Vertically-Aligned |
| D | Icon Control | Native UI5: Icon Icon default color: Object Status Colors Icon: Use respective semantic icon type Width: 1rem Height: 1rem Padding: 0rem Line-height: --sapContent_LineHeight |
| E | Text | Native UI5: Text Line-height: --sapContent_LineHeight Padding-top: 0.5rem |