You are viewing an archived version of the MindSphere Design System website, version 1.9.0

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:

Infotip, general construction

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.
  • 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:

Infotip
Infotip

Infotip with microcontent
Infotip (with arbitrary microcontent)

Wide infotip
Wide infotip

Behaviour

The infotip can be opened in all 4 directions, depending on the position within the viewport or configuration.

Infotip can be opened in all 4 directions

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.

Behaviour for interacting with infotips

Do’s & Don’ts

Position infotips so they don’t block related content if possible:

Do's & Don'ts width infotips

Do's & Don'ts width infotips

Keep the information brief and only show relevant information. Don’t use long content: An infotip should only be used for microcontent.

Do's & Don'ts width infotips

Use an infotip to provide additional information, don’t show redundant information:

Do's & Don'ts width infotips

Do's & Don'ts width infotips

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.

Do's & Don'ts width infotips
Do's & Don'ts width infotips

Style

This chapter shows several infotip styles in the design system.

Overview

Compact infotip
Infotip

Infotip
Infotip (with arbitrary microcontent)

Infotip
Infotip (with arbitrary microcontent)

Compact infotip
Wide infotip

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:

Infotip: Sizing and spacing
General spacing for infotip

Infotip: Sizing and spacing
Sizing for infotip min-width

Infotip: Sizing and spacing
Sizing for infotip max-width

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top