Goal
Ensure that additional content (like tooltips, popovers, or dropdowns) that appears when a user hovers or focuses on an element is accessible and usable for everyone — including keyboard users and those with low vision.
Key Points
- Applies to content triggered by hover or focus, such as:
- Tooltips
- Custom dropdowns or popovers
- Hover cards or interactive info boxes
- Users must be able to:
- Dismiss the extra content without moving focus (e.g., pressing ESC)
- Move pointer over the popup without it disappearing
- Trigger again easily if they move away by mistake
Short Summary
Any hover/focus-triggered content must be easy to read, dismiss, and reaccess without losing keyboard or mouse control.
Example Issue and Fix
Tooltip disappears instantly on hover out
Fail
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div class="group relative inline-block">
<button class="rounded bg-blue-600 px-4 py-2 text-white">Hover me</button>
<div class="invisible absolute top-full left-0 rounded bg-gray-800 px-3 py-2 text-sm text-white opacity-0 transition group-hover:visible group-hover:opacity-100">Tooltip info here</div>
</div>
</div>
Tooltip info here
Pass
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div class="group relative inline-block">
<button class="rounded bg-blue-600 px-4 py-2 text-white">Hover me</button>
<div class="invisible absolute top-full left-0 rounded bg-gray-800 px-3 py-2 text-sm text-white opacity-0 transition group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100">Tooltip info here</div>
</div>
</div>
Tooltip info here
Quick Checklist
- Tooltip or popover appears on both hover and focus
- User can dismiss with
Escor by moving focus away - Moving the pointer over popup does not close it instantly
- Works for keyboard and screen reader users
- Popup is visually distinct and does not obscure main content unnecessarily
- Tooltip text is readable with sufficient color contrast