Tooltips provide contextual information about a particular element.
<button class="btn--primary mb-3x">Top (Default)</button>
<tk-tooltip>Tooltip on the top</tk-tooltip>
<button class="btn--primary mb-3x">Right</button>
<tk-tooltip position="right">Tooltip on the right</tk-tooltip>
<button class="btn--primary mb-3x">Left</button>
<tk-tooltip position="left">Tooltip on the left</tk-tooltip>
<button class="btn--primary mb-3x">Bottom</button>
<tk-tooltip position="bottom">Tooltip on the bottom</tk-tooltip>
<button class="btn--primary mb-3x">Top Left</button>
<tk-tooltip position="top-left">Tooltip on the top-left</tk-tooltip>
<button class="btn--primary mb-3x">Bottom Left</button>
<tk-tooltip position="bottom-left">Tooltip on the bottom-left</tk-tooltip>
<button class="btn--primary mb-3x">Top Right</button>
<tk-tooltip position="top-right">Tooltip on the top-right</tk-tooltip>
<button class="btn--primary">Bottom Right</button>
<tk-tooltip position="bottom-right">Tooltip on the bottom-right</tk-tooltip>
<button class="btn--primary mb-3x">Small (Default)</button>
<tk-tooltip>
The small size should be good for most of your tooltip needs.
</tk-tooltip>
<button class="btn--primary mb-3x">Medium</button>
<tk-tooltip size="medium">
The max width for the medium size tooltip is about twice the max width of the small size.
</tk-tooltip>
<button class="btn--primary">Large</button>
<tk-tooltip size="large">
This is the large size tooltip. Although you may be itching to try it out, please refrain from using this size. It looks a little out of place, and the design team would probably not approve.
</tk-tooltip>
<button class="btn--primary mb-3x">Wrapped (Default)</button>
<tk-tooltip>
This tooltip shows what a link looks like when the text is wrapped. Here's my link, <a href="#" class="tooltip__link">harryjamespotter@hogwartsschool.com</a>
</tk-tooltip>
<button class="btn--primary">Not Wrapped</button>
<tk-tooltip no-wrap="true">
This tooltip shows what a link looks like when no-wrap is set to true. Here's my link, <a href="#" class="tooltip__link">harryjamespotter@hogwartsschool.com</a>
</tk-tooltip>
<button class="btn--primary mb-3x">Enabled (Default)</button>
<tk-tooltip enable="true">
Since the enable attribute is set to true by default, you can remove it.
</tk-tooltip>
<button class="btn--primary">Disabled</button>
<tk-tooltip enable="false">
This tooltip should never appear because it is disabled.
</tk-tooltip>
<button class="btn--primary" onClick="modal.openModal()">Open Modal</button>
<tk-modal id="modal" version="2">
<tk-modal-header>This Modal's Header</tk-modal-header>
<tk-modal-body>
<button class="btn--primary mb-3x">Right</button>
<tk-tooltip position="right">Tooltip on the right</tk-tooltip>
</tk-modal-body>
<tk-modal-footer>
<button
class="btn--tertiary mr-2x"
onClick="modal.closeModal('Close')"
>
Close
</button>
<button
class="btn--primary"
onClick="modal.closeModal('OK')"
>
OK
</button>
</tk-modal-footer>
</tk-modal>
This tooltip is attached to an element with a tk-modal. It properly aligns without issue.
<button class="btn--primary">Visible</button>
<tk-tooltip visible="true" position="right">
This tooltip is visible after initializing or refreshing the page. It acts as a normal tooltip after the mouse moves over the button or tooltip.
</tk-tooltip>
<tk-dropdown full-height="true" trigger-text="My Items">
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Special Item #1
</button>
<tk-tooltip position="left">Tooltip on item #1</tk-tooltip>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Special Item #2
</button>
<tk-tooltip position="left">Tooltip on item #2</tk-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.
<tk-dropdown full-height="true" trigger-text="My Items">
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Special Item #1
</button>
<tk-tooltip position="left" delay="false">
Tooltip on item #1
</tk-tooltip>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Special Item #2
</button>
<tk-tooltip position="left" delay="false">
Tooltip on item #2
</tk-tooltip>
</tk-dropdown-item>
</tk-dropdown>
Add delay=false"
to the tooltip to remove the delay time between its hidden and visible states. As stated in the previous example, for the tooltip to work with a dropdown item, add full-height="true"
to the tk-dropdown
component.
role="tooltip"
and automatically adds aria-describedby
to the previous sibling element which is the trigger element for the tooltip.