Tooltip

Tooltips provide text labels that display when users hover or focus on an element.

Examples

Base

To render a tooltip, apply the data-tooltip attribute to an element. Then initialize it with the chi.tooltip factory method.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<button id="tooltip-1" class="chi-button" data-tooltip="Your tooltip text on a button">Tooltip</button>

<script>chi.tooltip(document.getElementById('tooltip-1'));</script>

Positioning

By default, tooltip's position on top of an element. To alter position, use the data-position attribute. Valid values are top, right, bottom, left. You can pass an array of Elements and initialize all at once.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<button class="chi-button" data-tooltip="Your top tooltip text">Top Tooltip</button>
<button class="chi-button" data-tooltip="Your right tooltip text" data-position="right">Right Tooltip</button>
<button class="chi-button" data-tooltip="Your bottom tooltip text" data-position="bottom">Bottom Tooltip</button>
<button class="chi-button" data-tooltip="Yourleft tooltip text" data-position="left">Left Tooltip</button>

<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

Long Tooltips

Long Tooltips will be truncated on the third line. To display text beyond three lines, use the Popover component.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<button class="chi-button" data-tooltip="Lorem ipsum...">Top Tooltip</button>

<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

Preventing memory leaks

Tooltip components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

var elem = document.getElementById('tooltip');
var tooltip = chi.tooltip(elem);
// do stuff
tooltip.dispose();

TipIt is safe to call the tooltip method more than once, as it will return any previously created tooltip component associated to the element.

var elem = document.getElementById('tooltip-1');
var tooltip = chi.tooltip(elem);
var elem2 = document.getElementById('tooltip-1');
var tooltip2 = chi.tooltip(elem2);
tooltip === tooltip2; // returns true

tooltip.dispose(); // Only have to do it once.

Accessibility

Accessibility guidelines coming soon