The tooltip component is used to hide and show a small part of extra
information/content hidden behind an icon.
It consists of an icon and a content section. By adding the class js-tooltip,
the javascript of the brandplatform is initialised. On desktop the tooltip
behaves on hover and on mobile its active state is toggled.
This is some extra information.
<div class="m-tooltip js-tooltip ">
<span class="m-tooltip__icon icon-info"></span>
<div class="m-tooltip__content">
<p class="m-tooltip__text">
This is some extra information.
</p>
</div>
</div>
This is some extra information.
<div class="m-tooltip js-tooltip m-tooltip--down">
<span class="m-tooltip__icon icon-info"></span>
<div class="m-tooltip__content">
<p class="m-tooltip__text">
This is some extra information.
</p>
</div>
</div>
This is some extra information.
<div class="m-tooltip js-tooltip m-tooltip--left">
<span class="m-tooltip__icon icon-info"></span>
<div class="m-tooltip__content">
<p class="m-tooltip__text">
This is some extra information.
</p>
</div>
</div>
This is some extra information.
<div class="m-tooltip js-tooltip m-tooltip--right">
<span class="m-tooltip__icon icon-info"></span>
<div class="m-tooltip__content">
<p class="m-tooltip__text">
This is some extra information.
</p>
</div>
</div>
m-tooltip--down
This class will place the tooltip-content below the icon when hovering.
m-tooltip--right
This class will place the tooltip-content on the right of the icon when hovering.
m-tooltip--left
This class will place the tooltip-content on the left of the icon when hovering.
is-active
This class enables/disables the content part of the tooltip once the icon is clicked.