Skip to main content

Tooltip

Used to display a helpful message when hovering over an element.

Anatomy

  1. Trigger
  2. Container
  3. Text
  4. Arrow

Usage

Instead of using tooltips and hiding important information, consider writing clear, succinct, always visible descriptions. If you have space, don't use tooltips or toggletips. Just provide clear labels and sufficient body text.

Basic

To display a tooltip, just add a data-tooltip attribute and use the aria-label attribute to for the content you want to display.

function TooltipExample() {
  return (
    <Flex align="center" gap={16}>
      <h3 data-site-override="clearMarginBottom">Favorite Movies</h3>
      <span
        data-tooltip
        aria-label="We use this to create a personal experience in the app."
        style={{ height: '1.25rem' }}
      >
        <Icon icon={HelpCircleIcon} size="m" />
      </span>
    </Flex>
  )
}

Adding role attributes to elements is a common way to make them accessible. However, the Pando tooltip is not using an element. Instead, it uses the aria-label attribute to display the tooltip text which accomplishes the same thing in a more flexible way.

Positioning

To change the position of the tooltip, add the data-position attribute to the trigger element. The values are top, bottom, left, and right.

function TooltipPositionExample() {
  return (
    <Flex align="center" gap={16}>
      <h3 data-site-override="clearMarginBottom">Favorite Movies</h3>
      <span
        data-tooltip
        data-position="bottom"
        aria-label="We use this to create a personal experience in the app."
        style={{ height: '1.25rem' }}
      >
        <Icon icon={HelpCircleIcon} size="m" />
      </span>
    </Flex>
  )
}

Customizing

When you want to customize the Tooltip, you'll need to use CSS to override the default styles.

/* tooltip bubble and content */
.my-tooltip:hover::before {
  background-color: black;
  color: white;
}

/* tooltip arrow */
.my-tooltip:hover::after {
  border-color: black;
}

Behavior

Do: use the Tooltip to display a list a short helpful message.

Don't: use the Tooltip to display a message with links. Instead use the Popover component.

API

There is no API for the Tooltip component.

Accessibility

The Tooltip component is accessible by default. It uses the aria-label attribute to display the tooltip text.