Tooltip Component

About

We would like to update our Tooltip components to better match design and development expectations. Currently, we see some usage of Tooltip that is completely appropriate for the component. In other areas, we might see Tooltips mistakenly be used. Often times this is when there is interactive content in a Tooltip.

As a result, we would like to limit the situations in which a Tooltip component can be used and augment the gaps with interactivity with the upcoming Popover and Disclosure components. For Tooltip, it should be used for annotating interactive elements with descriptive text.

In addition, it would be nice if this implementation supported a minimal version of “clip detection”. This means that it should be aware of its boundary and will auto-update its position accordingly. This heuristic will be naive initially and will grow support over time.

Accessibility

In terms of accessibility, we will be referencing the following resources:

• https://github.com/scottaohara/a11y_tooltips
• https://sarahmhigley.com/writing/tooltips-in-wcag-21/
• https://www.youtube.com/watch?v=lb0_v7D4kbs

API Design

The Tooltip component will accept a single child. In addition, it will mutually accept a label prop and description prop. If label is used, then aria-labelledby will be applied to the child. If description is used, aria-describedby will be applied to the child.

Example

<Tooltip label="Modify account settings">
  <button type="button">Edit</button>
</Tooltip>

Output

<div class="tooltip-container">
  <button type="button" aria-labelledby="tooltip1">Edit</button>
  <span class="tooltip">
    <span id="tooltip1" role="tooltip" class="tooltip-content">
      Modify account settings
    </span>
  </span>
</div>

By default, this component will render in-context and will not be rendered using a Portal. This will be an enhancement later, as needed.

Requirements

• A tooltip can be applied to buttons, links, inputs, and more to create a tooltip
  • Question 1: What happens if our components don’t offer a way to access the interactive element?
• A tooltip should be invoked upon hover or focus of the element which the tooltip describes (after a pause)
• The tooltip should not be focusable, or contain elements which are focusable
• The tooltip is dismissed after the element which invoked the tooltip has been blurred (unless the tooltip itself is hovered)
• A tooltip is dismissible by use of the Escape key

Remaining items

• #10564
• https://github.com/carbon-design-system/carbon/issues/10716
• https://github.com/carbon-design-system/carbon/issues/10717

[joshblack]

Hey @kubijo! 👋

This is definitely an enhancement we’d like to make for tooltips so that they can render outside of the current tree. Hopefully, it will make the cut for v11, but if not we will prioritize landing it because of how often this comes up 👍

[kubijo]

Just FYI: For the time being, I’ve been able to make my own component thanks to react-popper-tooltip.

It is admittedly much more naive and unconcerned with A11Y than what you surely need, but it might give you some entropy to work with & I will gladly go back to carbons native and remove an extra library dependency in my project.