Feedback
Popover
Popover displays additional information or actions in a lightweight overlay triggered by user interaction. It can contain interactive content such as buttons, links, and form controls.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features10 checks
- Role dialog or menu appropriately applied based on content type (WCAG 4.1.2)
- Escape key closes popover for keyboard users (WCAG 2.1.1)
- Focus management returns focus to trigger on close (WCAG 2.4.3)
- Click outside to close for better user control (WCAG 3.2.1)
- Arrow indicator provides visual connection to trigger element
- Proper aria-describedby linking content to trigger when appropriate
- Color contrast ratios meet or exceed 4.5:1 for text (WCAG 1.4.3)
- Content is keyboard navigable with Tab and Shift+Tab (WCAG 2.1.1)
- Hover trigger includes keyboard alternative for accessibility
- Responsive positioning prevents content from being cut off (WCAG 1.4.10)
When to use this component
✓Do's
- •Interactive content on hover or click
- •Rich help text with links
- •Quick previews without navigation
- •Contextual information or secondary actions related to an element
✗Don'ts
- •For brief, text-only hints, use a Tooltip.
- •For long or complex workflows, use a Modal or Drawer.
- •For critical confirmations or decisions, use a Dialog.
- •For application or navigation menus, use a Menu.
Do's and Don'ts
✓ Do's
Use popovers for interactive content (links, buttons) on hover or click.
✗ Don'ts
Enter your 12-digit Aadhaar number without spaces or dashes. Learn more
Don't use popovers for simple text labels, use Tooltip instead.