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](/patterns-chapters/infotip/images/badge-usage-do-dont-format-2.png)

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:

NameStateFont-familyFont-sizeLine-heightText-align
HeaderallSiemens Sans Bold14px16pxleft
Info messageallSiemens Sans roman12px15pxleft

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

To see a detailed explanation of all existing classes, please refer to the usage table below.

Infotip

Infotip:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.
Infotip with microcontent:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus. image placeholder
Infotip with microcontent and icon weight overridden:
image placeholder
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.

Autohide behaviour

Focus events on buttons are not supported on Mac OS, neither with Firefox nor with Safari. Thus the autohide behaviour does not work on these browsers and they have to be shown/hidden via JavaScript.

For Mobile Safari the infotip button has to be pressed (touched) in order to show the infotip automatically.

Infotip autohide

Infotip autohide:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.
Infotip autohide with microcontent:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus. image placeholder
Infotip autohide with microcontent and icon weight overridden:
image placeholder
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.

Wide infotip, icon weight overridden

Infotip wide:
image placeholder
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.

Infotip opening in 4 different directions

Infotip on right side (default):
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.
Infotip above:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.
Infotip below:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.
Infotip on left side:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.

Usage

ElementClassDescription
.infotip .is-shown Opens an infotip, for closing this class has to be removed again.
.infotip .infotip--autohide Opens and closes infotips by setting focus on the infotip button. This way an infotip is automatically closed by clicking anywhere else outside the infotip, however this does not work on Mac OS with Firefox and Safari. These browsers don't support setting focus on button elements.
For Mobile Safari the infotip button has to be pressed (touched) in order to show the infotip automatically.
.infotip .infotip--wide Sets the total width for the infotip to the wide variant.
.infotip .infotip--left, .infotip--top, .infotip--bottom Sets the direction in which the infotip opens, relatively from the infotip icon. Right (from infotip icon) is default.
.infotip button .iconMdsp .question.filled Allows to override the infotip icon with an e.g. filled version of the question mark. Don't use any/arbitrary icons for the infotip, this is only meant to use different icon weights.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top