# Popover ## Examples ### Default ```html
Toggle Popover

Popover Content

Placement: ${args.placement}
``` ### HeaderDemo ```html
Open Header Popover

This popover demonstrates the basic header functionality:

  • Title in the header
  • Close button
  • Standard placement
``` ### HeaderVariations ```html

Basic Header

Basic Header

Standard header with default styling.

Long Title

Long Title

Header with a long title to test truncation.

With Overlay

With Overlay

Header with overlay background.

No Header

No Header

Popover with header explicitly disabled.
``` ### BottomSheetWithHeader ```html
Open Bottom Sheet

This demonstrates header behavior in bottom sheet mode:

  • Full width on mobile
  • Header stays fixed at top
  • Content scrolls underneath
  • Close button for easy dismissal
Action Button
``` ### OverlayDemo ```html
Open Overlay Popover

Overlay Demo

This popover has an overlay that dims the background content.

Click outside or on the overlay to close the popover.

Button Inside
``` ### PlacementDemo ```html
Top Start
Top Start Popover
Top
Top Popover
Top End
Top End Popover
Left
Left Popover

Center

Bottom (default)
Bottom Popover
Right
Right Popover
Bottom Start
Bottom Start Popover
Bottom
Bottom Popover
Bottom End
Bottom End Popover
``` ### ViewportEdgeDemo ```html
Top Edge

This popover should flip to bottom when near the top edge.

Right Edge

This popover should flip to left when near the right edge.

Bottom Edge

This popover should flip to top when near the bottom edge.

Left Edge

This popover should flip to right when near the left edge.

``` ### LargeContent ```html
Show Large Content

Large Content Popover

This demonstrates how the popover handles large content:

  • Content is scrollable if it exceeds viewport
  • Maintains max-width and max-height constraints
  • Preserves placement when possible
  • Flips placement when needed

Try resizing the window to see how it adapts!
``` ### FocusTrapDemo ```html
Open Popover

Focus Trap Demo

Tab navigation is trapped within this popover.

Button 1
Div with tabindex
``` ## Usage A Popover is a floating panel that appears on user interaction, providing additional information or controls without navigating away from the main interface. Unlike traditional tooltips, which provide simple text hints, popovers can contain rich content like buttons, links, forms, and images. The Popover API allows for native, accessible, and efficient rendering of popovers in modern web applications, reducing reliance on JavaScript-heavy solutions. **Use the Popover to:** - Display contextual information on demand, such as additional details about a user, job listing, or setting. - Provide lightweight interactions, such as quick actions or filtering options, without navigating away. - Show explanations or descriptions, reducing cognitive load. - Replace traditional dropdowns for richer, interactive content. - Display non-blocking alerts or notifications. **Do not use the Popover to:** - Display critical alerts or confirmation dialogs. Use dialog instead. - Replace full-screen navigation or complex multi-step workflows. - Hide essential information that should always be visible. ## Other Considerations - Provide a close button or mechanism to dismiss the popover when needed. - Position the popover near the triggering element while avoiding screen edges. - Use auto-placement where possible to avoid popovers going off-screen. - Dismiss popovers when clicking outside or pressing the Escape key. - Ensure content inside the popover does not cause layout shifts when opening. - Improved Native Support: The Popover API is a modern web standard that eliminates the need for custom JavaScript-heavy implementations. - Better Performance: Unlike traditional JS-based popovers, native popovers do not require complex event handling and reduce memory usage. - Accessibility-First Approach: The popover API ensures compliance with WCAG and ARIA guidelines, making the interface more inclusive. - Seamless User Experience: Popovers provide additional content when necessary without disrupting the main workflow.