Tooltips provide contextual information about a particular element.
This component is deprecated! Please use the new Tooltip instead.
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip position="above-leading">
<tk-button slot="tooltip-v2-trigger">Above leading</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip>
<tk-button slot="tooltip-v2-trigger">Above</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="above-trailing">
<tk-button slot="tooltip-v2-trigger">Above trailing</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
</div>The position prop is treated as a preference. If the preferred position does not fit inside the viewport, the component will reposition the tooltip. The repositioning logic for [position="above"] will attempt to reverse the block direction, i.e., ([position="below"]) and keep the inline direction. If the reversed block direction does not fit inside the viewport either, the preferred vertical orientation will be reversed to horizontal orientation.
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip position="below-leading">
<tk-button slot="tooltip-v2-trigger">Below leading</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="below">
<tk-button slot="tooltip-v2-trigger">Below</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="below-trailing">
<tk-button slot="tooltip-v2-trigger">Below trailing</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
</div>The position prop is treated as a preference. If the preferred position does not fit inside the viewport, the component will reposition the tooltip. The repositioning logic for [position="below"] will attempt to reverse the block direction, i.e., ([position="above"]) and keep the inline direction. If the reversed block direction does not fit inside the viewport either, the preferred vertical orientation will be reversed to horizontal orientation.
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip position="leading-above">
<tk-button slot="tooltip-v2-trigger">Leading above</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="leading">
<tk-button slot="tooltip-v2-trigger">Leading</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="leading-below">
<tk-button slot="tooltip-v2-trigger">Leading below</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
</div>The position prop is treated as a preference. If the preferred position does not fit inside the viewport, the component will reposition the tooltip. The repositioning logic for [position="leading"] will attempt to reverse the inline direction, i.e., ([position="trailing"]) and keep the block direction. If the reversed inline direction does not fit inside the viewport either, the preferred horizontal orientation will be reversed to vertical orientation.
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip position="trailing-above">
<tk-button slot="tooltip-v2-trigger">Trailing above</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="trailing">
<tk-button slot="tooltip-v2-trigger">Trailing</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="trailing-below">
<tk-button slot="tooltip-v2-trigger">Trailing below</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
</div>The position prop is treated as a preference. If the preferred position does not fit inside the viewport, the component will reposition the tooltip. The repositioning logic for [position="trailing"] will attempt to reverse the inline direction, i.e., ([position="leading"]) and keep the block direction. If the reversed inline direction does not fit inside the viewport either, the preferred horizontal orientation will be reversed to vertical orientation.
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip position="trailing" open>
<tk-button slot="tooltip-v2-trigger">Trigger</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip position="above-trailing" open>
<tk-button slot="tooltip-v2-trigger">Trigger</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
</div>To render a tooltip visible upon loading the component use the [open="true"] prop.
<tk-v2-tooltip position="trailing" color="dark" open>
<tk-button slot="tooltip-v2-trigger">Trigger</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>Supported color props are light (default) and dark.
<tk-v2-tooltip position="leading">
<tk-button status="disabled" slot="tooltip-v2-trigger">Disabled</tk-button>
A disabled trigger will not show a tooltp
</tk-v2-tooltip>A disabled trigger should not show the tooltip.
<tk-button
aria-haspopup="true"
onClick="modal.openModal()"
> Action Modal
> </tk-button> > <tk-modal id="modal"> > <tk-modal-header closeable="true">
Diagon Alley
</tk-modal-header>
<tk-modal-body>
<tk-v2-tooltip position="trailing">
<tk-icon-button
type="ghost"
size="small"
slot="tooltip-v2-trigger"
>
<tk-icon name="info"></tk-icon>
</tk-icon-button>
The Wizarding World's luxury shopping centre
</tk-v2-tooltip>
</tk-modal-body>
<tk-modal-footer>
<tk-button
aria-label="Close Modal"
class="mr-md-2x mb-sm-2x btn-sm-block"
onClick="modal.closeModal()"
type="outline"
>
Close
</tk-button>
<tk-button
class="btn-sm-block"
onClick="modal.closeModal()"
>
Get Coupon
</tk-button>
</tk-modal-footer>
</tk-modal><tk-dropdown full-height="true" trigger-text="My Items">
<tk-dropdown-item>
<tk-v2-tooltip position="leading">
<button class="dropdown__link" type="button" slot="tooltip-v2-trigger">
Special Item #1
</button>
Tooltip on item #1
</tk-v2-tooltip>
</tk-dropdown-item>
<tk-dropdown-item>
<tk-v2-tooltip position="trailing">
<button class="dropdown__link" type="button" slot="tooltip-v2-trigger">
Special Item #2
</button>
Tooltip on item #2
</tk-v2-tooltip>
</tk-dropdown-item>
<tk-dropdown-item>
<tk-v2-tooltip position="below">
<button class="dropdown__link" type="button" slot="tooltip-v2-trigger">
Special Item #3
</button>
Tooltip on item #3
</tk-v2-tooltip>
</tk-dropdown-item>
</tk-dropdown>For the tooltip to work with a dropdown item, add full-height="true" to the tk-dropdown component as shown above.
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip name="with-single-shortcut" position="above-leading">
<tk-button slot="tooltip-v2-trigger">Single shortcut</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip name="with-multi-shortcuts-col" position="above-leading">
<tk-button slot="tooltip-v2-trigger">Multi shortcuts (column)</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip name="with-multi-shortcuts-row" position="above-leading">
<tk-button slot="tooltip-v2-trigger">Multi shortcuts (row)</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
</div>
<script>
const tooltipWithSingleShortcut = document.querySelector('tk-v2-tooltip[name="with-single-shortcut"]')
const tooltipWithMultiShortcutsCol = document.querySelector('tk-v2-tooltip[name="with-multi-shortcuts-col"]')
const tooltipWithMultiShortcutsRow = document.querySelector('tk-v2-tooltip[name="with-multi-shortcuts-row"]')
tooltipWithSingleShortcut.shortcuts = ["K"]
tooltipWithMultiShortcutsCol.shortcuts = ["Ctrl+W", "Shift+W"]
tooltipWithMultiShortcutsRow.shortcuts = ["W", "K"]
</script>To display keyboard shortcuts inside the tooltip, pass an array of strings to the shortcuts prop, for example: ["Ctrl+C", "Cmd+C"].
This is useful for showing key combinations or alternative bindings for keyboard-driven actions.
Only up to two shortcuts can be shown per tooltip. If more are provided, only the first two will be displayed.
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip delay="200" name="with-delay-200" position="below-leading">
<tk-button slot="tooltip-v2-trigger">Custom delay 0.2s</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip delay="1000" name="with-delay-1000" position="below">
<tk-button slot="tooltip-v2-trigger">Custom delay 1s</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
<tk-v2-tooltip delay="2000" name="with-delay-2000" position="below-trailing">
<tk-button slot="tooltip-v2-trigger">ustom delay 2s</tk-button>
May it be a light to you in dark places, when all other lights go out.
</tk-v2-tooltip>
</div>The delay prop sets the time (in milliseconds) before the tooltip appears after the user hovers or focuses the trigger. The default value is delay="1000" (1 second).
<div class="l-flex l-justify-sp-between">
<tk-v2-tooltip delay="0" name="manual-close-1" position="below-leading">
<tk-button slot="tooltip-v2-trigger">Tooltip 1</tk-button>
Tooltip 1 content
</tk-v2-tooltip>
<tk-v2-tooltip delay="0" name="manual-close-2" position="below">
<tk-button slot="tooltip-v2-trigger">Tooltip 2</tk-button>
Tooltip 2 content
</tk-v2-tooltip>
<tk-v2-tooltip delay="0" name="manual-close-3" position="below-trailing">
<tk-button slot="tooltip-v2-trigger">Tooltip 3</tk-button>
Tooltip 3 content
</tk-v2-tooltip>
</div>
<script>
const tooltips = [
document.querySelector('tk-v2-tooltip[name="manual-close-1"]'),
document.querySelector('tk-v2-tooltip[name="manual-close-2"]'),
document.querySelector('tk-v2-tooltip[name="manual-close-3"]')
];
tooltips.forEach((tooltip, idx) => {
const trigger = tooltip.querySelector('[slot="tooltip-v2-trigger"]');
trigger.addEventListener('mouseenter', () => {
tooltips.forEach((t, i) => {
if (i !== idx) t.open = false;
});
tooltip.open = true;
});
trigger.addEventListener('mouseleave', () => {
tooltip.open = false;
});
});
</script>When hovering over a tooltip trigger, all other tooltips are closed and only the hovered tooltip is shown. This can be useful for scenarios where only one tooltip should be visible at a time.
The tooltip component includes the attribute role="tooltip" and automatically adds aria-describedby to the trigger element for the tooltip.