[Tooltip] WCAG 2.1 AA Hover Content Disappearing

[okry]

Bug report

Current Behavior

Tooltip content disappears when a user tries to hover over it. This violates WCAG 2.1 AA Success Criterion 1.4.13 Content on Hover or Focus.

Expected behavior

Tooltip content should remain present when a user moves their cursor to the tooltip and when the cursor is hovering over the tooltip content. This should follow the WCAG 1.4.13 success criterion https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus.

Suggested solution

Two options that I know of:

1. Create an invisible track from the triggering element to the tooltip content that won't trigger mouseOut event.
2. Add a timeout for when the tooltip disappears and cancel the timeout when the mouse hovers the tooltip content or the triggering element.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-tooltip	0.0.16
React	n/a
Browser	all
Assistive tech	n/a
Node	n/a
npm/yarn	n/a
Operating System	all

[benoitgrelard]

Thanks for bringing this to our attention.

I am curious to understand if this applies to Tooltip as it's purely for non-interactive content (ie. the same as title attribute, which they state is exempt from this requirement).

I can understand the requirement for other forms of components popping up on hover. For example, we have recently added a HoverCard component (not released yet) which does exactly this, you can move from the trigger to the content and it wont' close until you leave the content.

Are you able to share more information about this?

[akornmeier]

Quoted from the 1.4.13 success criterion:

Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.

[benoitgrelard]

Yeah I saw this, I'm just curious about what the difference is between title attribute and custom tooltips. ie. if they behave the same way exactly, why is one exempt and the other isn't?

[akornmeier]

That is a good point. I can reach out to some subject matter experts to see if I can get more clarity around this part of the spec.

[okry]

I talked with Glenda Sims, one of the authors of WCAG. According to her, the reason the title attribute doesn't fall under 1.4.13 is because it is the Browser Vendor's responsibility to fix the accessibility issue regarding the user agent title tooltip. This protects developers from being at fault for an accessibility issue that is the fault of the Browser Vendor.

Regardless of that, if you do make a custom tooltip, it does need to be hoverable by the cursor as stated in the second note under the Success Criteria. More information on why this needs to be met can be found on the understanding page: https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html

[benoitgrelard]

Thanks both for the extra info 🙏, that's very helpful.
It should be simple enough for us to add this, we'll plan for it.

[cseas]

For additional context, the Material UI Tooltip's interactive prop can be a source of inspiration for implementation:
https://material-ui.com/components/tooltips/#interactive

Ran into a use case for it today when I was presenting a tooltip implementation and realised there's no way to point to a particular section of the tooltip with the mouse.

[FarazPatankar]

Hey, so we kinda need this for an implementation we're working on. I am assuming a toggle/feature for this doesn't exist yet but is there something I can do in the meantime to keep the tooltips visible when hovering over them?

[jjenzz]

@FarazPatankar For now, you can render the Tooltip.Content part inside the Tooltip.Trigger part. It will allow the pointer events on the Tooltip.Content to propagate through the portal so that the trigger will think your pointer is still on the trigger.

<Tooltip.Root>
  <Tooltip.Trigger>
    Hover me

    <Tooltip.Content>
      Tooltip content
    </Tooltip.Content>
  </Tooltip.Trigger>
</Tooltip.Root>

https://codesandbox.io/s/crimson-cherry-phvi2

You can also control the component if you need more control, for example, to prevent the tooltip content from closing when you mouse down on it (for text selection) https://codesandbox.io/s/clever-waterfall-0sgpc

[djalmaaraujo]

Hey, @jjenzz, your comment works as expected. There's a minor issue with this approach: I am not sure if it applies to a WCAG 2.1 standard. If you have a link in the content of the tooltip, the link won't work. Can tooltips have actionable elements inside?

@benoitgrelard

[benoitgrelard]

No, tooltips should not contain any interactive content.

[seedy]

No, tooltips should not contain any interactive content.

For the sake of information, I took some time to look for references confirming your assertion:

• MDN - ARIA: tooltip role

Because the tooltip itself never receives focus and is not in the tabbing order, a tooltip can not contain interactive elements like links, inputs, or buttons.

I hope it may help.

Thanks for your work so far 🙏

[KenAJoh]

Would love to have this implemented, as of now we cant use this because of strict accessibility requirements. Specifically this rule

Hoverable
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing

[akornmeier]

I have been using the technique that @jjenzz suggested in this thread. However I encountered an issue using that technique when I pass the trigger element as a child to the Tooltip. In my use case, I have an IconButton component that I am using as the trigger.

I have modified @jjenzz's codesandbox to demo the issue: https://codesandbox.io/s/frosty-pine-pj2o1u?from-embed=&file=/src/ToolTip.jsx

The issue occurs when using the children as the trigger and wrapping Content in the Trigger component. Since Trigger is expected to receive a single React element child, I had to wrap children and Content in a div (I also tried using a fragment, but the tooltip content never rendered). In this scenario, the aria-describedby attribute gets applied to the wrapping div. This breaks screen reader functionality since the child button received focus meaning the content of the tooltip is never conveyed to the user.