Angular tooltip should be hoverable for accessibility

[juanjosegutierrez]

Describe the bug

The angular tooltip element opens when you hover over the trigger element and closes when you leave. If you try to hover over the tooltip content, then the tooltip will close. According to WCAG 21, tooltip content needs to be hoverable too. Here is the documentation: https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html.

How to reproduce

This issue can be seen on the clarity page for the angular tooltip in one of the tooltip examples: https://clarity.design/angular-components/tooltip/

Here is a screenshot:

Steps to reproduce the behavior:

1. Go to https://clarity.design/angular-components/tooltip/
2. Scroll down to the tooltip demos like in the screenshot.
3. Hover over one of the tooltip demo elements.
4. Once the tooltip opens, attempt to hover over the tooltip content.
5. See that it is not possible

Expected behavior

User should be able to hover over tooltip content.

Versions

Clarity project:

• [ ] Clarity Core
• [x] Clarity Angular/UI

Clarity version:

• [ ] v3.x
• [ ] v4.x
• [x] v5.x

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 12

Device:

• Type: MacBook
• OS: MacOS
• Browser chrome
• Version 95

Additional notes

None.

[gnomeontherun]

@scrosiner Can you check if this is already a duplicate of what we have tracked internally? I believe so.

@juanjosegutierrez is based on testing through VMware?

[juanjosegutierrez]

@gnomeontherun yes this is based on VMware testing

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.