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.

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.
Infotip:
<div class="infotip">
    <button type="button">
        <span aria-hidden='true' class='iconMdsp'></span>
    </button>
    <div role="tooltip">
        <div class="infotip__wrapper">
            <div class="infotip__close"></div>
            <div class="infotip__header">
                New Feature
            </div>
            Donec id elit non mi porta <a rel="noopener noreferrer" target="_blank" href="https://www.mindsphere.io/design">gravida at eget metus</a>. Duis mollis, est non commodo luctus.
        </div>
    </div>
</div>

Infotip with microcontent:
<div class="infotip">
    <button type="button">
        <span aria-hidden='true' class='iconMdsp'></span>
    </button>
    <div role="tooltip">
        <div class="infotip__wrapper">
            <div class="infotip__close"></div>
            <div class="infotip__header">
                New Feature
            </div>
            Donec id elit non mi porta <a rel="noopener noreferrer" target="_blank" href="https://www.mindsphere.io/design">gravida at eget metus</a>. Duis mollis, est non commodo luctus.
            <img src="assets/images/image.png" alt="image placeholder">
        </div>
    </div>
</div>

Infotip with microcontent and icon weight overridden:
<div class="infotip">
    <button type="button">
        <span aria-hidden='true' class='iconMdsp question filled'></span>
    </button>
    <div role="tooltip">
        <div class="infotip__wrapper">
            <img src="assets/images/image.png" alt="image placeholder">
            <div class="infotip__header">
                New Feature
            </div>
            Donec id elit non mi porta <a rel="noopener noreferrer" target="_blank" href="https://www.mindsphere.io/design">gravida at eget metus</a>. Duis mollis, est non commodo luctus.
        </div>
    </div>
</div>

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