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: Infotip with microcontent: Infotip with microcontent and icon weight overridden:
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:
Infotip wide: <div class="infotip infotip--wide">
<button type="button">
<span aria-hidden='true' class='iconMdsp'></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>
Infotip opening in 4 different directions
Infotip on right side (default): Infotip above: Infotip below: Infotip on left side:
New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus. New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus. New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus. New Feature
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus.Infotip on right side (default):
<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 above:
<div class="infotip infotip--top">
<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 below:
<div class="infotip infotip--bottom">
<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 on left side:
<div class="infotip infotip--left">
<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>
Usage
Element | Class | Description |
---|---|---|
.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. |