Popover

Click-triggered floating panel for secondary content or actions.

Default

import { Popover, Button } from '@canarist/ui'

<Popover trigger={<Button variant="outline">More info</Button>}>
  <p>Alerts are scored based on event severity.</p>
</Popover>

Alignment

<Popover trigger={<Button>Align start</Button>} align="start">
  <p>Content</p>
</Popover>

<Popover trigger={<Button>Align end</Button>} align="end">
  <p>Content</p>
</Popover>

Reference

Prop	Type	Default	Description
trigger	ReactNode	—	Element that toggles the popover on click.
children	ReactNode	—	Content inside the popover panel.
side	'top' \| 'bottom' \| 'left' \| 'right'	'bottom'	Side of the trigger the popover appears on.
align	'start' \| 'center' \| 'end'	'start'	Alignment along the cross-axis.
className	string	—	Additional CSS classes on the popover panel.