Skip to content
UX Atlas
AccessibilityCraft conventionIntermediate

Content on Hover or Focus

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

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 page
  1. Definition
  2. The three requirements in practice
  3. Sources
  4. Continue from here

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.

Sources

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

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

Relied on by

Entries that assume this is already in place.

  • MenuComponent
  • PopoverComponent
  • TooltipComponent

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

Related concept

Connected closely enough to change how you apply this.