Laravel Hover Card Component

Pro

Rich tooltip that displays detailed content when hovering over a trigger element.

A Hover Card 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::hover-card>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Hover Card is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::hover-card>
    <x-slot:trigger>
        <span class="font-semibold text-violet-600 underline decoration-dotted cursor-pointer">@johndoe</span>
    </x-slot:trigger>
    <x-slot:content>
        <div class="flex items-center gap-3">
            <x-aura::avatar initials="JD" size="lg" />
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-sm text-gray-500">Full-stack developer</p>
            </div>
        </div>
        <p class="mt-2 text-sm text-gray-600">Building things with Laravel and Alpine.js.</p>
    </x-slot:content>
</x-aura::hover-card>

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

Props

Prop	Type	Default	Description
`position`	`string`	`'top'`	Where the card appears relative to the trigger: `top`, `bottom`, `left`, `right`.
`delay`	`int`	`300`	Delay in milliseconds before the card appears on hover.
`width`	`string`	`'md'`	Card width: `sm` (240px), `md` (320px), `lg` (400px).