Popover

Displays rich content in a portal, triggered by a button.

Example

Basic Popover

Click the button to toggle the popover.

blade

<div class="flex w-full justify-center">
    <x-plume::popover>
        <x-slot:trigger>
            <x-plume::button style="outline">Open Popover</x-plume::button>
        </x-slot:trigger>
        <div class="space-y-2">
            <h4 class="font-medium leading-none text-foreground/80 dark:text-background-200">
                Dimensions</h4>
            <p class="text-sm text-foreground/60 dark:text-background-400">
                Set the dimensions for the layer.</p>
        </div>
    </x-plume::popover>
</div>

String Trigger

Pass a simple string as the trigger.

blade

<div class="flex w-full justify-center">
    <x-plume::popover trigger="Click me">
        <p class="text-sm text-foreground/80 dark:text-background-200">Simple trigger popover.</p>
    </x-plume::popover>
</div>

Prop	Type	Default	Description
trigger	string	null	The text or slot content for the popover trigger.
position	string	'bottom'	The primary position: 'top', 'bottom', 'left', 'right'.
align	string	'center'	Alignment relative to position: 'start', 'center', 'end'.
onOpen	string	null	AlpineJS expression or function to call when the popover opens.
onClose	string	null	AlpineJS expression or function to call when the popover closes.

Usage

blade

<x-plume::popover trigger="Open">
    Content...
</x-plume::popover>