Tooltip Component

[joshblack]

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

• Document Tooltip/Popover, migration path #10564
• Add auto alignment option to popover #10716
• Replace usages of old Tooltip with new Toggletip, Tooltip, Popover, etc. #10717

[joshblack]

cc @carmacleod always curious to hear your thoughts on this stuff!

[joshblack]

Open questions:

• Should we have a "definition tooltip" become a toggle tip? A "term" with a "definition" are not inherently interactive roles so the tooltip would not able to be applied
• Should the "icon tooltip" correspond to the "Icon Button" with a tooltip? Icons by themselves are not interactive and therefore can not receive focus
• Interactive tooltip is not allowed because tooltips must not have interactive content. Should this guidance be moved to our "disclosure" work, maybe call it a "toggle tip"?

It does seem like there are some roles we could see if we could make accessible:

• term
• definition

Coverage for these seems unknown: https://a11ysupport.io/tech/aria/term_role

[kubijo]

Hello.

Do you have any sense of timeline for the reimplementation of tooltips & whether it would include support for portal-ing?

---

Context

I've just started working on a task whose goal is to fix the usage of <TooltipIcon /> inside <DataTable />.

The core of this issue is that the wrapper node of our (version of) DataTable needs overflow-x: auto and since there is no way to make CSS honour two different overflow properties in opposing directions we get issues where tooltips either get clipped or cause extra scrollbars.

The only solution I can see for this is to use React portals.
I haven't, however, found any component that would allow me to tell it that it needs to be mounted in body and to keep as much styling / behaviour of your tooltips without needing to basically reimplement the whole thing from the ground up.

Top

Right

Bottom

Left

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