WCAG 1.4.13 Content on Hover or Focus (level AA) explained

What it asks for, in plain English

When hovering or focusing on something makes extra content appear, such as a tooltip, a hover card, a mega menu or a preview, three things have to be true. It must be dismissable: the person can make it go away without moving the pointer or focus, usually by pressing Escape. It must be hoverable: they can move the pointer onto the new content without it vanishing. It must be persistent: it stays until they dismiss it, move away, or it is no longer relevant.

The point is that people who zoom in heavily see only a small part of the screen, and a tooltip may cover the very thing they are reading. They need to be able to get rid of it, or move onto it to read it with their magnifier.

Browser-native tooltips from the title attribute are exempt because the browser controls them (though they are a poor tooltip anyway). Content that appears on hover but is only a visual change to the thing itself, like a button highlight, is not covered.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.13 page has the full intent, techniques and definitions.

Who it affects

Someone using screen magnification at 400 percent cannot see the whole tooltip and finds it disappears the moment they move towards it.

A person with a tremor cannot keep the pointer still on a tiny trigger and loses the content when they drift off it.

A keyboard user tabs onto a field, a hint pops up over the next field, and there is no way to close it without moving on.

Example

Broken

<style>
  .tip { position: relative; }
  .tip .bubble { display: none; position: absolute; top: 2.4em; left: 0; }
  .tip:hover .bubble { display: block; }
</style>
<span class="tip">Delivery fee <span class="bubble">Calculated at checkout from your postcode.</span></span>

There is a gap between the trigger and the bubble, so the bubble vanishes when the pointer moves towards it. Focus never shows it and Escape does nothing.

Fixed

<style>
  .tip { position: relative; }
  .tip .bubble { display: none; position: absolute; top: 100%; left: 0; padding-top: 4px; }
  .tip:hover .bubble, .tip:focus-within .bubble { display: block; }
</style>
<span class="tip"><button type="button" aria-describedby="fee-tip">Delivery fee</button>
  <span class="bubble" id="fee-tip" role="tooltip">Calculated at checkout from your postcode.</span></span>

The bubble touches the trigger so it can be hovered, and it appears on keyboard focus. Add a small script so Escape hides it to complete the three requirements.

How to check it

Hover over anything that shows a tooltip or pop-up, then move the pointer onto the pop-up itself. It should stay open.
With the pop-up showing, press Escape without moving the pointer. It should close.
Tab to the same trigger with the keyboard. The pop-up should appear, and Escape should close it.
Leave the pointer on the trigger for a while. The pop-up should not disappear on a timer.

What Websight checks for 1.4.13

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

Only a person can check this. A scanner cannot hover, wait, or press Escape, and it cannot tell a tooltip from any other hidden element.

Practical tips

Position pop-ups so they touch or overlap their trigger; a gap is what makes them vanish on the way over.
Wire Escape to close every tooltip, menu and hover card you build.
Prefer showing short hints as visible text under the field; then there is nothing to pop up at all.