popover

Non-modal floating panel anchored to a trigger.

A headless, non-modal popover anchored to a trigger, positioned with Floating UI and dismissed on Escape / outside pointer.

import { Popover, PopoverTrigger, PopoverPortal, PopoverContent, PopoverClose } from '@fluixi/popover';

<Popover placement="bottom">
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverPortal>
    <PopoverContent>
      …
      <PopoverClose>Close</PopoverClose>
    </PopoverContent>
  </PopoverPortal>
</Popover>

Controlled (open) or uncontrolled (defaultOpen); placement and offset configure positioning.
Content is positioned (absolute left/top) with data-placement; focus moves into it on open and restores on close (not trapped — non-modal).
Closes on Escape, outside pointer down (excluding the trigger) and PopoverClose.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

popover