Popover

Floating content panel anchored to a trigger element. Supports controlled open state and a close button.

Example

Props

Popover.Root

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls visibility (bindable)
`children`	`Snippet`	—	Trigger and content

Popover.Trigger

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Trigger element

Popover.Content

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side of the trigger
`sideOffset`	`number`	`4`	Distance from trigger in px
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Popover body

Popover.Close

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Close button content

Usage

<script>
  import { Popover, Button } from '@chrissnell/chonky-ui';

  let open = $state(false);
</script>

<Popover.Root bind:open>
  <Popover.Trigger>
    <Button>Toggle</Button>
  </Popover.Trigger>
  <Popover.Content side="bottom">
    <p>Popover content here.</p>
    <Popover.Close>
      <Button size="sm">Close</Button>
    </Popover.Close>
  </Popover.Content>
</Popover.Root>