Tooltips

Purpose

Users need additional, potentially optional information on demand.

Description

Tooltips provide information when an element is hovered over.

• Tooltips are attached to an element and appear when the element is hovered over
• The show and hide delays of a tooltip may vary depending on the need, but the default is 200ms to show and 0ms to hide
• Tooltips cannot be interacted with

Use tooltips for:

• Icon and button descriptions
• Expanding shortened date/time stamps

<div class="tooltip fade in right">
    <div class="tooltip-inner">I'm a tooltip!</div>
    <div class="tooltip-arrow"></div>
</div>

<div class="tooltip tooltip-light fade in right">
    <div class="tooltip-inner">I'm a light tooltip!</div>
    <div class="tooltip-arrow"></div>
</div>

Positioning

Tooltips can be positioned either above, below, to the left, or to the right of target element. In many situations, tooltips should be positioned dynamically based on the available space around the target element.

Content

The content of a tooltip can vary. It’s best to keep it to a few words.