Infotip
An infotip provides context-related additional information to explain a function or feature.
Usage
When to use
Use an infotip in the following cases:
- To provide auxiliary explanation.
- To explain why a field/element is displayed.
- To explain a feature or function.
- To draw a users’ attention to a new feature without interrupting their workflow.
Don’t use the infotip to hold information that is vital to complete a task.
General construction
An infotip consists of the following elements:
1. Trigger Icon
- Open the infotip by clicking the infotip icon.
- Avoid using text hyperlinks as trigger.
2. Image
- An image is optional.
- An image can be either positioned above the header or under the infotip message.
3. Header
- A header is optional.
4. Info message
- Keep the text short: it is recommended to not use more than three lines of text for easier reading.
- Use links to direct the user to more information.
5. Close
- Use a ‘x’ to close the infotip (optional) or tap/click any area of the screen.
- On mobile screen sizes mainly used for touch interaction it is recommended to always provide a “x” to close the infotip.
6. Background
Options
The following infotip options are available:
Behaviour
The infotip can be opened in all 4 directions, depending on the position within the viewport or configuration.
An infotip can be opened by clicking or touching the info icon and closed by interacting with any other element on the screen. Only one infotip is visible at a time.
Do’s & Don’ts
Position infotips so they don’t block related content if possible:
Keep the information brief and only show relevant information. Don’t use long content: An infotip should only be used for microcontent.
Use an infotip to provide additional information, don’t show redundant information:
Long blocks of text are difficult to read and overwhelming. Format text so that it is much easier to read. Recommended length is 2 - 3 lines.
Style
This chapter shows several infotip styles in the design system.
Overview
Typography
The following table gives reference to the different font sizes and weights:
Name | State | Font-family | Font-size | Line-height | Text-align |
---|---|---|---|---|---|
Header | all | Siemens Sans Bold | 14px | 16px | left |
Info message | all | Siemens Sans roman | 12px | 15px | left |
Sizing and spacing
The following measurements show the dimensions for infotips: