# Popover

## Example

```svelte
<script lang="ts">
	import { Popover, Button, toast } from '@foxui/all';

	let open = $state(false);

	let colors = [
		{ label: '1', value: 'oklch(from var(--color-accent-500) l c h)' },
		{ label: '2', value: 'oklch(from var(--color-accent-500) l c calc(h + 40))' },
		{ label: '3', value: 'oklch(from var(--color-accent-500) l c calc(h + 80))' }
	];
</script>

<h3>Default trigger</h3>

<Popover triggerText="click me" triggerVariant="secondary" triggerClasses="mt-2" bind:open>
	<div class="flex items-center justify-between gap-2">
		<div>Are you sure?</div>
		<div>
			<Button
				variant="secondary"
				size="iconSm"
				onclick={() => {
					open = !open;
					toast('Fair enough!');
				}}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					class="size-6"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
				</svg>
			</Button>

			<Button
				size="iconSm"
				onclick={() => {
					open = !open;
					toast('Good choice!');
				}}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					class="size-6"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
				</svg>
			</Button>
		</div>
	</div>
</Popover>
```

## Documentation

## Usage

```svelte
<!-- default trigger -->
<Popover triggerText="Click me" triggerVariant="secondary">Hello this is a test</Popover>

<!-- custom trigger -->
<Popover>
	{#snippet child({ props })}
		<button {...props} class="bg-accent-500 mt-2 size-8 cursor-pointer rounded-full"></button>
	{/snippet}
	Content of the popover here
</Popover>
```

## Sources

This component uses the bits-ui component: Popover, see here for the documentation for that: https://bits-ui.com/docs/components/popover/llms.txt

## API Reference

### Popover
A floating panel anchored to a trigger button. Built on top of the bits-ui Popover primitive.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| open | `boolean` | `false` | Whether the popover is open. (bindable) |
| onOpenChange | `(open: boolean) => void` | `-` | A callback invoked when the open state changes. |
| children | `Snippet` | `-` | The content to display inside the popover. (required) |
| triggerText | `string` | `-` | Text label for the trigger button. |
| triggerVariant | `'primary' | 'secondary' | 'link' | 'ghost'` | `'primary'` | The visual variant of the trigger button. |
| triggerSize | `'default' | 'sm' | 'lg' | 'icon' | 'iconSm' | 'iconLg'` | `'default'` | The size of the trigger button. |
| triggerClasses | `string` | `''` | Additional CSS classes to apply to the trigger button. |
| triggerRef | `HTMLButtonElement` | `-` | Reference to the trigger button element. (bindable) |
| side | `'top' | 'bottom' | 'left' | 'right'` | `'top'` | The preferred side of the trigger to render the popover. |
| sideOffset | `number` | `10` | The distance in pixels from the trigger. |
| child | `Snippet` | `-` | A snippet for custom trigger rendering. Use this instead of triggerText for full control over the trigger. |
| class | `string` | `-` | Additional CSS classes to apply to the popover content. |