Popover

Popover renders a floating panel anchored to a trigger element. Unlike Dialog, it is non-modal: users can interact with the page outside it. It closes on outside click or Escape key. Popover uses the Popper primitive for positioning.

Usage

import { Popover, PopoverTrigger, PopoverContent, PopoverArrow } from '@loke/ui/popover';

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <button>Open popover</button>
      </PopoverTrigger>
      <PopoverContent>
        <div style={{ padding: '16px' }}>
          Popover content here
          <PopoverArrow width={12} height={6} />
        </div>
      </PopoverContent>
    </Popover>
  );
}

Sub-components

• PopoverTrigger — Element that opens the popover
• PopoverContent — Floating panel with dismiss handling
• PopoverArrow — Arrow pointing to the trigger
• PopoverAnchor — Custom anchor point (alternative to trigger)
• PopoverClose — Close button
• PopoverPortal — Portal container

Props

Examples

Basic popover

Popover with content panel

Accessibility

• Popover does not trap focus; users can interact with the page.
• Escape closes the popover and returns focus to the trigger.
• Outside clicks close the popover.
• Popover has role="dialog" and aria-labelledby pointing to a title.
• Screen readers announce that it is a popover (non-modal).

Best practices

• Use Popover for non-critical information (tooltips, filters, quick menus).
• Use Dialog for modal workflows where users must complete an action.
• Include a PopoverArrow for visual connection to the trigger.
• Make it easy to dismiss: include a close button or rely on outside click/Escape.
• Keep popover content concise to avoid obscuring the page.