Definition tooltip does not support Hoverable requirement

[mbgower]

Definition tooltip does not support Hoverable requirement

Environment

React Storybook

Operating system
Windows 7

Browser
Firefox and Chrome

Detailed description

Although the tooltip appears on both hover and keyboard focus, when activated by mouse hover, it is not possible to move the mouse down to the tooltip content.

What did you expect to happen?

A requirement of WCAG is:

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

This allows someone who has magnified the content to be able to read the tooltip information.

What happened instead?

The tooltip content disappears the moment the pointer leaves the target area.

What WCAG 2.1 checkpoint does the issue violate?

Content on hover or focus

Steps to reproduce the issue

1. Launch the Definitino tooltip form React Storybook
2. Hover over the trigger with the mouse
3. Attempt to move the pointer to the tooltip content. Content will instead disappear

Additional information

Screenshot of storybook with custom tooltip exposed.

[emyarod]

I don't think this is currently achievable with our pure CSS approach to definition and icon tooltips. to satisfy this requirement I believe this would mean extending the interactive tooltip for the time being, or getting started on a definition/icon tooltip refactor