Content on hover or focus cannot be dismissed

What’s wrong

A tooltip or popup appears on hover or focus but cannot be dismissed without moving focus, or disappears when the user tries to hover over it.

Why it matters

People who use screen magnification zoom into a small area of the screen. When a tooltip appears outside their current view, they need to move their pointer over to read it — but if it disappears when they leave the trigger element, they never get to see it.

How to fix it

Hover/focus content must be dismissible with Escape, hoverable (stays open when pointer moves over it), and persistent until dismissed.

<!-- title tooltip vanishes when user tries to read it -->
<button title="This is a tooltip">Help</button>

<div class="tooltip-wrapper">
  <button
    aria-describedby="help-tooltip"
    aria-expanded="false"
  >Help</button>
  <div id="help-tooltip" role="tooltip" class="tooltip">
    This explains what the button does.
  </div>
</div>

// Close on Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeTooltip();
});
// Keep open when hovering tooltip itself
tooltip.addEventListener('mouseenter', keepOpen);

Avoid the title attribute for any meaningful content — tooltips it creates cannot be hovered, disappear quickly, and don’t work on touch devices.

Learn more

• WCAG Understanding 1.4.13
• WAI-ARIA tooltip pattern