Tooltips

Small messages that appear when hovering over an element. Choose from left, right, top or bottom.

Code Example

<p>Tooltip on a <a href="#" data-tooltip="In a gentle way, you can shake the world.">link</a></p>
<button data-tooltip="In a gentle way, you can shake the world." data-placement="bottom">Tooltip on a button</button>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.