Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Card Select
  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

Tooltips

Tooltips provide contextual information about a particular element.


This component is deprecated! Please use the new Tooltip instead.

Tooltips should be as concise as possible. For larger amounts of content, use Popovers instead.

Position: above

Above leading May it be a light to you in dark places, when all other lights go out. Above May it be a light to you in dark places, when all other lights go out. Above trailing May it be a light to you in dark places, when all other lights go out.
Expand Copy
<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>

Description

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.

Position: below

Below leading May it be a light to you in dark places, when all other lights go out. Below May it be a light to you in dark places, when all other lights go out. Below trailing May it be a light to you in dark places, when all other lights go out.
Expand Copy
<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>

Description

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.

Position: leading

Leading above May it be a light to you in dark places, when all other lights go out. Leading May it be a light to you in dark places, when all other lights go out. Leading below May it be a light to you in dark places, when all other lights go out.
Expand Copy
<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>

Description

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.

Position: trailing

Trailing above May it be a light to you in dark places, when all other lights go out. Trailing May it be a light to you in dark places, when all other lights go out. Trailing below May it be a light to you in dark places, when all other lights go out.
Expand Copy
<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>

Description

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.

Visible (Initially)

Trigger May it be a light to you in dark places, when all other lights go out. Trigger May it be a light to you in dark places, when all other lights go out.
Expand Copy
<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>

Description

To render a tooltip visible upon loading the component use the [open="true"] prop.

Color

Trigger May it be a light to you in dark places, when all other lights go out.
Expand Copy
<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>

Description

Supported color props are light (default) and dark.

Disabled

Disabled A disabled trigger will not show a tooltp
Expand Copy
<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>

Description

A disabled trigger should not show the tooltip.

Tooltips inside of a modal

Action Modal > > > Diagon Alley The Wizarding World's luxury shopping centre Close Get Coupon
Expand Copy
<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>

Description

Tooltip inside of a dropdown

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

Description

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

With keyboard shortcuts

Single shortcut May it be a light to you in dark places, when all other lights go out. Multi shortcuts (column) May it be a light to you in dark places, when all other lights go out. Multi shortcuts (row) May it be a light to you in dark places, when all other lights go out.
Expand Copy
<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>

Description

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.

Usage

Do

  • Limit the amount of copy in a tooltip
  • Make sure the trigger receives focus
  • Pair tooltips with appropriate icons

Don't

  • Overuse tooltips within a component
  • Put large amounts of content inside a tooltip. Use Popovers instead

Accessibility

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