Tooltip
Examples
Base
<ChiTooltip message="Your tooltip text on a button">
<button class="chi-button">Hover me to see tooltip</button>
</ChiTooltip>
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">Hover me to see tooltip</button>
<script>chi.tooltip(document.getElementById('tooltip-1'));</script>
Light
Use light tooltips for rendering tooltips on dark backgrounds.
<ChiTooltip message="Your tooltip text on a button" color="light">
<button class="chi-button -outline -light">Hover me to see tooltip</button>
</ChiTooltip>
To use, apply the
data-tooltip-color="light"
attribute to the Tooltip trigger element.This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<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
<ChiTooltip message="Tooltip message for a disabled button">
<span>
<button class="chi-button" disabled>Hover me to see tooltip</button>
</span>
</ChiTooltip>
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.This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<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
<ChiTooltip message="Your top tooltip text" position="top">
<button class="chi-button">Top Tooltip</button>
</ChiTooltip>
<ChiTooltip message="Your right tooltip text" position="right">
<button class="chi-button">Right Tooltip</button>
</ChiTooltip>
<ChiTooltip message="Your bottom tooltip text" position="bottom">
<button class="chi-button">Bottom Tooltip</button>
</ChiTooltip>
<ChiTooltip message="Your left tooltip text" position="left">
<button class="chi-button">Left Tooltip</button>
</ChiTooltip>
By default, tooltip is positioned on top of the 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="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.
<ChiTooltip message="Lorem ipsum...">
<button class="chi-button">Hover me to see tooltip</button>
</ChiTooltip>
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...">Hover me to see tooltip</button>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
Chi Vue
Props
Property | Description | Type | Default |
---|---|---|---|
message | To set the tooltip message to display | string | undefined |
position | To set position of the tooltip | 'top' | 'right' | 'bottom' | 'left' | 'top' |
color | To set the background color of the tooltip | 'base' | 'light' | 'base' |
Events
Event | Description |
---|---|
chiTooltipShow | Tooltip show method has been executed. |
chiTooltipHide | Tooltip hide method has been executed. |
chiTooltipShown | Tooltip has been shown to the user and is fully visible. |
chiTooltipHidden | Tooltip has been hidden to the user. |
JavaScript
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.