Tooltips

Base

Tooltips require the tooltip class, one of the four direction classes tooltip--top tooltip--right tooltip--bottom or tooltip--left, and the data-tooltip attribute containing your content. Tooltips work by utilizing the power of CSS pseudo classes.

<button type="button" class="button button--white tooltip tooltip--top" data-tooltip="I'm a top tooltip!">
    Button With A Top Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--bottom" data-tooltip="I'm a bottom tooltip!">
    Button With A Bottom Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--left" data-tooltip="I'm a left tooltip!">
    Button With A Left Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--right" data-tooltip="I'm a right tooltip!">
    Button With A Right Tooltip
</button>

Primary Color

<button type="button" class="button button--white tooltip tooltip--top tooltip--primary-color" data-tooltip="I'm a top tooltip!">
    Button With A Top Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--bottom tooltip--primary-color" data-tooltip="I'm a bottom tooltip!">
    Button With A Bottom Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--left tooltip--primary-color" data-tooltip="I'm a left tooltip!">
    Button With A Left Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--right tooltip--primary-color" data-tooltip="I'm a right tooltip!">
    Button With A Right Tooltip
</button>

Secondary Color

<button type="button" class="button button--white tooltip tooltip--top tooltip--secondary-color" data-tooltip="I'm a top tooltip!">
    Button With A Top Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--bottom tooltip--secondary-color" data-tooltip="I'm a bottom tooltip!">
    Button With A Bottom Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--left tooltip--secondary-color" data-tooltip="I'm a left tooltip!">
    Button With A Left Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--right tooltip--secondary-color" data-tooltip="I'm a right tooltip!">
    Button With A Right Tooltip
</button>

Tertiary Color

<button type="button" class="button button--white tooltip tooltip--top tooltip--tertiary-color" data-tooltip="I'm a top tooltip!">
    Button With A Top Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--bottom tooltip--tertiary-color" data-tooltip="I'm a bottom tooltip!">
    Button With A Bottom Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--left tooltip--tertiary-color" data-tooltip="I'm a left tooltip!">
    Button With A Left Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--right tooltip--tertiary-color" data-tooltip="I'm a right tooltip!">
    Button With A Right Tooltip
</button>

Sizes

Tooltip sizes include smallest, smaller, medium, large, larger, and largest. You can also change sizes at breakpoints by appending sizes with --xxs through --xxl.

<button type="button" class="button button--white tooltip tooltip--top tooltip--smallest" data-tooltip="I'm the smallest tooltip!">
    Button With The Smallest Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--top tooltip--smaller" data-tooltip="I'm the smaller tooltip!">
    Button With The Smaller Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--top tooltip--small" data-tooltip="I'm the small tooltip!">
    Button With The Small Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--top tooltip--medium" data-tooltip="I'm the medium tooltip!">
    Button With The Medium Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--top tooltip--large" data-tooltip="I'm the large tooltip!">
    Button With The Large Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--top tooltip--larger" data-tooltip="I'm the larger tooltip!">
    Button With The Larger Tooltip
</button>

<button type="button" class="button button--white tooltip tooltip--top tooltip--largest" data-tooltip="I'm the largest tooltip!">
    Button With The Largest Tooltip
</button>