Content on Hover or Focus

What it asks

When extra content — a tooltip, a popover, a submenu — appears because the user hovered or focused something, it must satisfy three rules. Dismissible: the user can close it without moving pointer or focus (typically via the Escape key). Hoverable: if the user moves the pointer from the trigger into the revealed content, it stays open. Persistent: it doesn’t time out and disappear until the user dismisses it or the trigger loses focus.

How to meet it

• Wire Escape to close any tooltip / popover that opens on hover or focus.
• Make sure the tooltip element itself is reachable by mouse — don’t position it where moving toward it triggers a mouseout on the trigger.
• Don’t auto-dismiss tooltips after a timeout while the user is still hovering or focused on the trigger.
• Use aria-describedby to associate the trigger with the popup so screen readers announce the content.
• Build popovers with the HTML popover attribute or a tested library (Popper.js, Floating UI, Radix UI) — both handle these rules.
• For dropdown submenus, give a small grace area between the parent menu item and the submenu so the pointer can cross without dismissal.

Common failures

• CSS-only :hover tooltips with a gap between trigger and tooltip — the pointer moves into the gap, mouseout fires, tooltip disappears.
• Tooltips that auto-dismiss after 2 seconds even while the user is still hovering.
• No Escape key handler — keyboard users can’t dismiss a focus-triggered tooltip without leaving the field.
• Dropdown menus that close the moment the pointer drifts off the parent item, before reaching the child items.
• Popovers triggered on focus that grab the visible area and can’t be hidden by Escape — they sit there forever.

Why it matters

This SC is most commonly violated by handrolled tooltips and CSS-only dropdown menus. Switch to a library that already handles dismissibility and hoverability, or audit your custom code against the three rules. It’s a high-leverage fix: hover content tends to be everywhere on a complex UI, so getting it right once in a shared component is a major audit-debt clearing.