• Success Criterion 1.4.13
  • Conformance level AA

Tooltip That Covers the Very Field It’s Meant to Explain

1.4.13 — Content on Hover or Focus

Scenario

Setting

A hospital's patient portal appointment scheduler

What’s wrong

Tooltip obscures the very field it describes and can't be dismissed.

Example 

.dob-field:focus + .dob-tooltip { display: block; position: absolute; top: -4px; left: 0; }
<!-- the tooltip explaining the date format sits directly on top of the date-of-birth input it describes -->

Why it matters

A patient focusing the date-of-birth field to read its format hint can't see the field itself, since the tooltip is positioned directly over it.

How to test

Trigger a tooltip near a form field: if it visually covers the very field it's describing and can't be dismissed, it fails.

How to fix

Position help content beside or below the field it describes, never directly over it.

.dob-tooltip { position: absolute; top: 100%; left: 0; margin-top: 6px; }

Outcome

A patient reads the date-format hint while still seeing the date-of-birth field clearly beneath it.

Who is affected

Screen magnifier users at high zoom can lose sight of both the field and the tooltip content when one covers the other.

Learn more

Related scenarios