Popover

Example

Default trigger

Usage

		<!-- 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>

API Reference

Popover

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

Property Type Description

open $bindable

boolean

Whether the popover is open. Default: false

onOpenChange

function

A callback invoked when the open state changes. Default: —

children required

Snippet

The content to display inside the popover.

triggerText

string

Text label for the trigger button. Default: —

triggerVariant

enum

The visual variant of the trigger button. Default: 'primary'

triggerSize

enum

The size of the trigger button. Default: 'default'

triggerClasses

string

Additional CSS classes to apply to the trigger button. Default: ''

triggerRef $bindable

HTMLButtonElement

Reference to the trigger button element. Default: —

side

enum

The preferred side of the trigger to render the popover. Default: 'top'

sideOffset

number

The distance in pixels from the trigger. Default: 10

child

Snippet

A snippet for custom trigger rendering. Use this instead of triggerText for full control over the trigger. Default: —

class

string

Additional CSS classes to apply to the popover content. Default: —

Property

open

onOpenChange

children

triggerText

triggerVariant

triggerSize

triggerClasses

triggerRef

side

sideOffset

child

class