1.4.13 Content on Hover or Focus

Level AA · added in WCAG 2.1

When extra content appears on hover or keyboard focus, such as a tooltip or popup, it must be dismissible, hoverable and persistent. Users must be able to close it, move the pointer onto it, and keep it open until they are done.

Who it helps

Screen magnifier users often need to move the pointer onto a tooltip to read it. People with low vision or cognitive disabilities need time to read, and need to close popups that cover what they were reading.

How to meet it

Dismissible: let users close the content, usually with Escape, without moving the pointer or focus. This is not needed for input errors or content that covers nothing.
Hoverable: keep the content open while the pointer moves from the trigger onto the content itself, with no gap that closes it.
Persistent: keep it visible until hover or focus leaves, the user dismisses it, or its information is no longer valid; do not hide it on a timer.
Show the same content on keyboard focus as on hover, for example with :focus-within.
Native title attribute tooltips are exempt because the browser controls them, but they also fail many users, so prefer a custom tooltip.

Examples

Fails:The tooltip appears only on hover, sits 8px away, and closes when the pointer moves onto it

.tip-text {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
}
.tip-trigger:hover + .tip-text { display: block; }

Passes:The tooltip sits inside the hover area, touches the trigger, and also opens on focus

.tip { position: relative; }
.tip-text {
  display: none;
  position: absolute;
  top: 100%;
}
.tip:hover .tip-text,
.tip:focus-within .tip-text { display: block; }
.tip.is-dismissed .tip-text { display: none; }

Passes:Escape hides the tooltip without moving the pointer or focus

<span class="tip">
  <button type="button" aria-describedby="fee-tip">Fees</button>
  <span role="tooltip" id="fee-tip" class="tip-text">A 2% fee applies to card payments.</span>
</span>
<script>
  const tip = document.querySelector(".tip");
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") tip.classList.add("is-dismissed");
  });
  tip.addEventListener("mouseleave", () => tip.classList.remove("is-dismissed"));
  tip.addEventListener("focusout", () => tip.classList.remove("is-dismissed"));
</script>

Can a scanner detect this?

axe-core has no rule for this criterion, because the content appears only on hover or focus and depends on pointer movement. Hover each trigger, move onto the popup, press Escape and tab to it with the keyboard.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Leaving a gap between the trigger and the tooltip, so the tooltip closes before the pointer reaches it.
Hiding tooltips automatically after a few seconds.
Providing no way to close a hover popup except moving the pointer away, which may reveal other popups.
Showing the content on mouse hover but not on keyboard focus.

Official W3C explanation of 1.4.13

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026