Popover

A floating content panel that appears anchored to a trigger element. Built on Radix UI Popover primitives with enter/exit animations. Available as both a convenience wrapper (PopoverWrapper) and individual primitives for full control.

Import

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverAnchor,
  PopoverClose,
  PopoverWrapper,
} from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

Simple wrapper

<PopoverWrapper
  trigger={<Button>Open Popover</Button>}
  side="bottom"
  align="start"
>
  <p>Popover content goes here.</p>
</PopoverWrapper>

Primitives for full control

<Popover>
  <PopoverTrigger asChild>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent side="right" align="start">
    <p>Content with full control over placement.</p>
    <PopoverClose asChild>
      <Button variant="outline" size="sm">Close</Button>
    </PopoverClose>
  </PopoverContent>
</Popover>

Props

PopoverWrapper

Prop	Type	Default	Description
`trigger`*	ReactNode	-	The element that triggers the popover.
`children`*	ReactNode	-	Content displayed inside the popover panel.
`side`	'top' \| 'right' \| 'bottom' \| 'left'	`'bottom'`	Side of the trigger where the popover is rendered.
`align`	'start' \| 'center' \| 'end'	`'center'`	Alignment of the popover relative to the trigger.
`open`	boolean	-	Controlled open state.
`onOpenChange`	(open: boolean) => void	-	Callback when the open state changes.
`contentClassName`	string	-	Additional CSS class for the popover content panel.
`showArrow`	boolean	-	Whether to show an arrow pointing to the trigger.

PopoverContent

Prop	Type	Default	Description
`children`*	ReactNode	-	Content rendered inside the popover.
`align`	'start' \| 'center' \| 'end'	`'center'`	Alignment of the content relative to the trigger.
`sideOffset`	number	`4`	Distance in pixels between the trigger and the popover.
`className`	string	-	Additional CSS class for the content container.