Tooltips

The tooltip can be used to give extra information about something. The tooltip can be used around many other objects.

For a tooltip to work you need to wrap an element in a class .tooltip. After the wrapped element you need to use the class .tooltip__content which will contain the content of the tooltip. On the tooltip content you can also specify the position of the tooltip. You can do this with the following classes: .tooltip--top, .tooltip--right, .tooltip--bottom,.tooltip--left.

    
<div class="tooltip">
    <button class="button button--contained">Left</button>
    <span class="tooltip__content tooltip--left">Tooltip</span>
</div>

<div class="tooltip">
    <button class="button button--contained">Top</button>
    <span class="tooltip__content tooltip--top">Tooltip</span>
</div>

<div class="tooltip">
    <button class="button button--contained">Right</button>
    <span class="tooltip__content tooltip--right">Tooltip</span>
</div>

<div class="tooltip">
    <button class="button button--contained">Bottom</button>
    <span class="tooltip__content tooltip--bottom">Tooltip</span>
</div>