Tooltips

Tooltips provide contextual information about a particular element.

Position

Tooltip on the top Tooltip on the right Tooltip on the left Tooltip on the bottom
<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">Bottom</button>
<tk-tooltip position="bottom">Tooltip on the bottom</tk-tooltip>

Size

The small size should be good for most of your tooltip needs. The max width for the medium size tooltip is about twice the max width of the small size. 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.
<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>

Wrapped / Not Wrapped

This tooltip shows what a link looks like when the text is wrapped. Here's my link, harryjamespotter@hogwartsschool.com This tooltip shows what a link looks like when no-wrap is set to true. Here's my link, harryjamespotter@hogwartsschool.com
<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>

Enabled / Disabled

Since the enable attribute is set to true by default, you can remove it. This tooltip should never appear because it is disabled.
<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>

Visible (Initially)

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.
<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>

Dropdown Items (With Delay)

Tooltip on item #1 Tooltip on item #2
<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>

Description

For the tooltip to work with a dropdown item, add full-height="true" to the tk-dropdown component as shown above.

Dropdown Items (No Delay)

Tooltip on item #1 Tooltip on item #2
<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>

Description

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.

Do

  • Limit the amount of copy in a tooltip
  • Pair tooltips with appropriate icons

Don't

  • Overuse tooltips within a component

Accessibility

  • The tooltip component includes the attribute role="tooltip" and automatically adds aria-describedby to the previous sibling element which is the trigger element for the tooltip.