• Success Criterion 1.4.13
  • Conformance level AA
  • W3C reference F95

Hover Tooltip That Vanishes Before the Pointer Can Reach It

1.4.13 — Content on Hover or Focus

Scenario

Setting

A university's online course catalog

What’s wrong

Content that appears on hover (tooltip, preview) vanishes when the user tries to move the mouse onto it — it can never be read closely.

Example 

.prereq-link:hover + .prereq-tooltip { display: block; }
.prereq-tooltip { display: none; position: absolute; top: -40px; }
<!-- the tooltip disappears the instant the mouse leaves .prereq-link, before it can reach the tooltip itself -->

Why it matters

A student trying to read a course's full prerequisite list watches the tooltip disappear the moment they move the mouse toward it.

How to test

Hover to trigger the tooltip/popover, then move the pointer toward it: if it disappears before the pointer reaches it, it fails.

How to fix

Keep the tooltip open while the pointer is over either the trigger or the tooltip itself, closing the gap between them.

.prereq-tooltip { display: none; }
.prereq-link:hover ~ .prereq-tooltip,
.prereq-tooltip:hover { display: block; }

Outcome

A student moves the mouse onto the tooltip and reads the full prerequisite list without it disappearing first.

Who is affected

Users with low vision who need to zoom into a tooltip, or anyone with a hand tremor, can never actually reach and read it.

Learn more

Related scenarios