Tooltip
Examples#
Base#
To render a tooltip, apply the data-tooltip attribute to an element. Then
initialize it with the chi.tooltip factory method.
<button id="tooltip-1" class="chi-button" data-tooltip="Your tooltip text on a button">Hover me to see tooltip</button>
<script>chi.tooltip(document.getElementById('tooltip-1'));</script>
Light#
Use light tooltips for rendering tooltips on dark backgrounds. To use, apply the data-tooltip-color="light" attribute to the Tooltip trigger element.
<button id="tooltip-2" class="chi-button -outline -light" data-tooltip="Your tooltip text on a button" data-tooltip-color="light">Hover me to see tooltip</button>
<script>chi.tooltip(document.getElementById('tooltip-2'));</script>
Tooltip on disabled buttons#
When a button element is in disabled state, mouseenter and mouseleave events
are not being triggered. Wrap the disabled button in a span element, providing the attribute data-tooltip=""
to achieve the same behavior
<span data-tooltip="Tooltip message for a disabled button" id="tooltip-disabled-button">
<button class="chi-button" disabled>Hover me to see tooltip</button>
</span>
<script>chi.tooltip(document.getElementById('tooltip-disabled-button'));</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.
<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="Your left 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 fourth line. To display text beyond four lines, use the Popover component.
<button class="chi-button" data-tooltip="Lorem ipsum...">Hover me to see tooltip</button>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
Events#
Event | Description |
|---|---|
chiTooltipShow | Tooltip show method has been executed. |
chiTooltipHide | Tooltip hide method has been executed. |
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.