Tooltip

Tooltips display brief contextual text on hover or focus using CSS only.

Usage

Add the .Tooltip class and a data-tooltip attribute containing the tooltip text.

<button class="Button primary Tooltip" data-tooltip="Save your changes">
  Save
</button>

The tooltip appears above the element by default.

Positions

• Default: Top (above the element).
• .bottom: Below the element.
• .left: To the left of the element.
• .right: To the right of the element.

<span class="Tooltip bottom" data-tooltip="Below">Hover me</span>
<span class="Tooltip left" data-tooltip="Left side">Hover me</span>
<span class="Tooltip right" data-tooltip="Right side">Hover me</span>

Wide Variant

Use .wide for longer tooltip text that needs more space.

<span class="Tooltip wide" data-tooltip="This is a longer description that needs more room.">
  Help
</span>

Activation

Tooltips appear on :hover and :focus-within, requiring no JavaScript.