• Overview
• Basic Usage
• Props
• Slots
• Variants / Examples
  • Hover Trigger
  • Position Variants
  • Rich Content (Inline Form)
  • Non-Closeable
• Events
• Accessibility

Overview#

The <x-aura::popover> component renders a floating panel anchored to a trigger element. Unlike tooltips (which display plain text), popovers can contain rich content such as forms, lists, or interactive elements. The popover supports four positioning options, click or hover triggers, configurable width, and smooth transitions powered by Alpine.js.

Use popovers for:

• Rich content tooltips with actions
• Inline forms (quick edit, color picker)
• Mini detail panels
• Filter or settings panels

Basic Usage#

<x-aura::popover>
    <x-aura::button variant="outline">Open Popover</x-aura::button>

    <x-slot:content>
        <p class="text-sm">This is the popover content.</p>
    </x-slot:content>
</x-aura::popover>

Props#

Slots#

Variants / Examples#

Hover Trigger#

<x-aura::popover trigger="hover" position="top" width="250px">
    <x-aura::badge variant="info">Hover me</x-aura::badge>

    <x-slot:content>
        <x-aura::text size="sm">Additional details displayed on hover.</x-aura::text>
    </x-slot:content>
</x-aura::popover>

Position Variants#

<x-aura::popover position="top">
    <x-aura::button variant="outline" size="sm">Top</x-aura::button>
    <x-slot:content><p class="text-sm">Appears above.</p></x-slot:content>
</x-aura::popover>

<x-aura::popover position="right">
    <x-aura::button variant="outline" size="sm">Right</x-aura::button>
    <x-slot:content><p class="text-sm">Appears to the right.</p></x-slot:content>
</x-aura::popover>

Rich Content (Inline Form)#

<x-aura::popover width="320px">
    <x-aura::button variant="outline" icon="filter" size="sm">Filters</x-aura::button>

    <x-slot:content>
        <div class="space-y-3">
            <x-aura::input label="Search" placeholder="Filter by name..." size="sm" />
            <x-aura::select label="Status" size="sm">
                <option value="">All</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </x-aura::select>
            <x-aura::button size="sm" class="w-full">Apply</x-aura::button>
        </div>
    </x-slot:content>
</x-aura::popover>

Non-Closeable#

<x-aura::popover :closeable="false">
    <x-aura::button>Persistent</x-aura::button>

    <x-slot:content>
        <p class="text-sm">This popover stays open until you interact with a close action inside.</p>
        <x-aura::button size="sm" class="mt-2" x-on:click="open = false">Close</x-aura::button>
    </x-slot:content>
</x-aura::popover>

Events#

The popover uses Alpine.js internally to manage visibility:

• Click trigger: Toggles open state on click (@click="open = !open")
• Hover trigger: Opens on @mouseenter, closes on @mouseleave
• Close: Outside click (@click.outside) and Escape key (@keydown.escape.window) when closeable is true

Accessibility#

• The popover uses smooth x-transition enter/leave animations with x-cloak to prevent flash of content.
• When closeable is enabled, pressing Escape dismisses the popover.
• The trigger wrapper uses cursor-pointer to indicate interactivity.
• For popovers containing interactive content, ensure form elements inside are keyboard-accessible.
• The glass morphism styling provides a clear visual distinction from the underlying page content.