Popover

x-popover

A teleported floating panel that follows its trigger on scroll and resize. The same engine that powers the dropdown, with full control over placement.

php artisan components:add popover

Playground

position align gap animate

Examples

Placements

Full control over which side the panel opens on.

<div class="flex min-h-64 w-full flex-wrap items-center justify-center gap-3">
    <x-components.popover position="bottom" align="center">
        <x-slot:trigger><x-components.button variant="outline">Bottom</x-components.button></x-slot:trigger>
        <x-slot:content>
            <p class="text-sm font-medium text-foreground">Popover title</p>
            <p class="mt-1 text-sm text-foreground/60">Positioned below and centered on the trigger.</p>
        </x-slot:content>
    </x-components.popover>
    <x-components.popover position="right" align="center">
        <x-slot:trigger><x-components.button variant="outline">Right</x-components.button></x-slot:trigger>
        <x-slot:content>
            <p class="text-sm text-foreground/70">I appear to the right.</p>
        </x-slot:content>
    </x-components.popover>
    <x-components.popover position="top" align="center">
        <x-slot:trigger><x-components.button variant="outline">Top</x-components.button></x-slot:trigger>
        <x-slot:content>
            <p class="text-sm text-foreground/70">I appear above.</p>
        </x-slot:content>
    </x-components.popover>
</div>

Props

Prop	Type	Default	Description
`position`	select bottom · top · left · right	`bottom`	Which side of the trigger the popover opens on.
`align`	select left · center · right · bottom	`left`	Alignment of the popover relative to the trigger.
`gap`	text	`2`	Spacing between trigger and popover (Tailwind spacing units).
`animate`	boolean	`true`	Scale + fade the panel open from the corner nearest the trigger. Set false for a plain fade.

Slots

Slot	Description
`trigger`	The clickable element that opens the popover.
`content`	Pre-styled panel container slot.
`slot`	Fallback panel content when no `content` slot is given.