Skip to content
UX Atlas
Plate A11Y·018 · AccessibilityGrid A3 · Rev. 2026-09-14

Content on Hover or Focus

Content that appears on hover or focus must be dismissible, hoverable and persistent.

AccessibilityCraft conventionIntermediate

Definition

WCAG 1.4.13 sets three requirements for content triggered by hover or focus: it can be dismissed without moving the pointer, the pointer can move onto it without it disappearing, and it remains visible until dismissed or no longer valid.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2The three requirements in practice
  3. 3What belongs in a tooltip, and what does not
  4. 4Hover and focus content that people can actually read
  5. 5Local chart
  6. 6Sources
  7. 7Continue from here

Reach for this when

  • Tooltips, popovers and hover cards.
  • Cascading menus.

Common mistakes

  • Tooltips that close on the smallest pointer movement.
  • Auto-hiding hover content.
  • No Escape handling.

The three requirements in practice

  • Dismissible: Escape closes it without moving the pointer.
  • Hoverable: a small gap between trigger and content must not cause it to close, so keep the hover area continuous or add a short close delay.
  • Persistent: it stays until dismissed, the pointer leaves both trigger and content, or the information becomes invalid. No auto-hide timers.

What belongs in a tooltip, and what does not

Most failures of this criterion come from putting the wrong thing in a tooltip rather than from the tooltip mechanics.

  • A short clarification of a visible label: yes, and keep it short enough to read in one glance.
  • The full text of something truncated: acceptable, but a route to the full content elsewhere is better.
  • Form instructions or format requirements: no. They belong beside the field, visible before entry.
  • Error messages: no. They must persist and be associated with the field.
  • Anything interactive, such as a link or a button: not in a tooltip. That is a popover, with different semantics and focus behaviour.
  • Essential information available nowhere else: no. Touch users may never see it at all.

Hover and focus content that people can actually read

Do

  • Show it on focus as well as hover, since keyboard readers never hover.
  • Let Escape dismiss it without moving the pointer.
  • Keep the path between trigger and content hoverable, or add a short close delay.
  • Leave it up until the reader dismisses it or moves away from both trigger and content.

Do not

  • Do not hide it on a timer, which fails anyone reading slowly or at high magnification.
  • Do not place it where it covers the element it describes.
  • Do not rely on the title attribute, which has no keyboard equivalent and no styling control.
  • Do not put a tooltip on a touch-only interface and assume it will be discovered.

Local chart

A11Y·018 · Region V · Grid A3

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

MenuCMP·018 · RELIED ON BYPopoverCMP·012 · RELIED ON BYTooltipCMP·013 · RELIED ON BYKeyboard NavigationA11Y·002 · RELATED CONCEPTSteering LawLAW·016 · RELATED CONCEPTTooltips and Inline HelpWRT·015 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

Navigation

Relied on by

Entries that assume this is already in place.

  • MenuCMP·018 · Component
  • PopoverCMP·012 · Component
  • TooltipCMP·013 · Component

    Hover content has dismissible, hoverable and persistent requirements that most tooltips fail.

Related concept

Connected closely enough to change how you apply this.