Component Library

On keyboard or mouse hover, a tooltip, menu, or other non-modal content is displayed, but:

• Hover-displayed content cannot be dismissed using the Escape key or without moving focus away from the element.
• Hover-displayed content obscures or covers other page content.
• Hover-displayed content does not remain displayed long enough to read, dismisses itself without user action.
• Keyboard or mouse focus does not activate the tooltip.

If hovering or moving focus to an element results in added content being displayed, or if added content appears without intentional user action, the user must be able to dismiss that content without moving the mouse or changing focus (such as pressing the escape key to dismiss the added content). If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing. The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

• Consider adding an info <button> with a <label="info"> following the element needing additional description. This avoids forcing users to read the tooltips unless the explicitly activate the info button.
• Keyboard focus should be discoverable and readable for the keyboard only user.

Example: <span id="popup" role="tooltip">And this additional text gives additional context on the trigger term</span>

https://knowbility.org/blog/2018/WCAG21-1413ContentHoverFocus/