Popover

The Popover component displays floating content anchored to another element, with configurable positioning, navigation modes, and responsive behavior.

Basic usage

The Popover provides floating content that can be triggered from and anchored to any element.

Component anatomy

Position

Control popover placement using the position Input with twelve options:

• Above: Above-Before, Above-Center, Above-After
• Below: Below-Before, Below-Center, Below-After
• Before: Before-Above, Before-Center, Before-Below
• After: After-Above, After-Center, After-Below

Each position includes automatic fallback logic if the preferred position doesn't fit.

Navigation Mode

Configure interaction behavior using navigationMode Input:

• Modal: Full modal behavior with backdrop
• Non-modal: Light floating content
• Non-modal with focus guidance: Focus-trapped floating content

Close Control

Manage closing behavior with:

• showCloseButton Input: Toggle close button visibility
• closeButtonTooltip Input: Custom tooltip text
• Click outside detection
• Escape key support
• Programmatic close control

Responsive Behavior

Adapt to different screen sizes using:

• displayFullOnMobile Input: Full screen on mobile
• fullWidthOnMobile Input: Full width on mobile
• Automatic positioning adjustments
• Content overflow handling

Visual Pointer

Configure the pointing arrow with:

• showTip Input: Toggle visibility
• Automatic position adaptation
• RTL support
• Collision detection

Negative Theme

Enable dark theme using the negative Input, affecting:

• Background colors
• Pointer colors
• Close button styling
• Backdrop opacity

Accessibility

Keyboard Navigation

Comprehensive keyboard support:

• Tab navigation based on mode
• Escape to close
• Focus trapping in modal mode
• Focus guidance in non-modal
• RTL keyboard adaptation

ARIA Implementation

Complete ARIA integration:

• Dialog/none role options
• Proper labeling
• State descriptions
• Focus management
• Live region updates

Focus Management

Mode-specific focus handling:

• Modal: Full focus trap
• Non-modal: Natural tab flow
• Focus guidance: Managed focus boundaries
• Return focus on close
• Visual focus indicators

Best Practices for Developers

1. Position Selection DEMO HERE

2. Navigation Mode Guidelines DEMO HERE

3. Mobile Adaptation DEMO HERE