Laravel Popover Component

Free · MIT

A floating content panel that appears on click or hover, supporting multiple positions and glass morphism styling.

A Popover built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::popover>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

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>

See the full API, props and live examples in the Popover documentation.

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

Props

Prop	Type	Default	Description
`position`	`string`	`'bottom'`	Position relative to the trigger: `top`, `bottom`, `left`, `right`
`width`	`string`	`'300px'`	CSS width of the popover panel
`closeable`	`bool`	`true`	Allow closing via outside click and Escape key
`trigger`	`string`	`'click'`	How the popover opens: `click`, `hover`