Agent WranglersAccessibility Required
Show hover content that people can reach
Content that appears on hover or focus must be dismissible with Escape, hoverable without vanishing, and stay until people move away. This is WCAG criterion 1.4.13 (AA).
How to do it
Show tooltips on focus as well as hover. Keep them open while the pointer is over the tooltip itself. Close them on Escape without moving focus. Prefer a popover opened by a button for anything longer than a few words.
Example
<button type="button" popovertarget="vat-help" aria-label="About VAT">?</button>
<div id="vat-help" popover>Prices include 25% VAT.</div>How to check
A browser test hovers each tooltip trigger, moves the pointer onto the tooltip, and it stays. Pressing Escape closes it.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/content-on-hover-focus.