Components

Tooltip

Enable tooltips everywhere, without JavaScript.

Tooltip on a link

Tooltip on inline element

<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>

Placement#

The tooltip is displayed on top by default but you can change it with the data-placement attribute.

<button data-tooltip="Top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>

Edit this page on GitHub