Styleguides

Shared Assets & Docs

Menu

Add a data-tooltip attribute containing the tooltip content to create a pure CSS tooltip. We're using a customized version of Hint. You can add a .tooltip-is-active class to turn the tooltip on or off, which can be done vis JavaScript.

Here's a tooltip in the middle of a line.

Here's an activated tooltip

<a href="#" data-tooltip="Tooltip Content" class="top-tooltip">Link</a>
<a href="#" data-tooltip="Tooltip Content" class="top-tooltip tooltip-is-active">Link</a>

Positions

Add a class of .[position]-tooltip to set the position of the tooltip. This is required.

<a href="#" data-tooltip="Tooltip on Top" class="top-tooltip">Tooltip on Top</a>
<a href="#" data-tooltip="Tooltip on Right" class="right-tooltip">Tooltip on Right</a>
<a href="#" data-tooltip="Tooltip on Bottom" class="bottom-tooltip">Tooltip on Bottom</a>
<a href="#" data-tooltip="Tooltip on Left" class="left-tooltip">Tooltip on Left</a>

Colors

You can vary the colors in the same way as the messages, with .success-tooltip, .warning-tooltip, and .error-tooltip classes.

<a href="javascript:void(0)" data-tooltip="Success Tooltip" class="top-tooltip success-tooltip">Success Tooltip</a>
<a href="javascript:void(0)" data-tooltip="Warning Tooltip" class="top-tooltip warning-tooltip">Warning Tooltip</a>
<a href="javascript:void(0)" data-tooltip="Error Tooltip" class="top-tooltip error-tooltip">Error Tooltip</a>

Tooltip Block

Add a class of .block-tooltip to have it span multiple lines

<a href="#" data-tooltip="Lorem..." class="top-tooltip block-tooltip">Tooltip on Top</a>
<a href="#" data-tooltip="Lorem..." class="right-tooltip block-tooltip">Tooltip on Right</a>
<a href="#" data-tooltip="Lorem..." class="bottom-tooltip block-tooltip">Tooltip on Bottom</a>
<a href="#" data-tooltip="Lorem..." class="left-tooltip block-tooltip">Tooltip on Left</a>