Tooltips

On this page

# Intro

Tooltips can be created by using the tooltip class along with a data-tooltip attribute.

<button class="button tooltip" data-tooltip="this is a tooltip">Tooltip</button>

# Elements

Tooltips can be added to any inline element

Anchor

This is a tooltip inside a paragraph

<a href="" class="tooltip -top" data-tooltip="this is an anchor tooltip">Anchor</a>
<button class="button tooltip -top" data-tooltip="this is a button tooltip">Button</button>
<label class="tooltip -top" data-tooltip="this is a label tooltip" tabindex="0">Label</label>
<p>This is a <u><span class="tooltip -bottom" data-tooltip="this is a span tooltip" tabindex="0">tooltip</span></u> inside a paragraph</p>

# Position

By default tooltips open to the top of the element but can be changed with the left, right, or bottom modifiers.

<button class="button tooltip -left" data-tooltip="this is a left tooltip">Left</button>
<button class="button tooltip" data-tooltip="this is a top tooltip">Top</button>
<button class="button tooltip -right" data-tooltip="this is a right tooltip">Right</button>
<button class="button tooltip -bottom" data-tooltip="this is a bottom tooltip">Bottom</button>