blatui

Components

Hover Card

For sighted users to preview content available behind a link.

php artisan blatui:add hover-card 
<x-ui.hover-card>
    <x-ui.hover-card-trigger>
        <x-ui.button variant="link">&#64;nextjs</x-ui.button>
    </x-ui.hover-card-trigger>
    <x-ui.hover-card-content class="w-80">
        <div class="flex justify-between gap-4">
            <x-ui.avatar>
                <x-ui.avatar-image src="https://github.com/vercel.png" alt="@nextjs" />
                <x-ui.avatar-fallback>VC</x-ui.avatar-fallback>
            </x-ui.avatar>
            <div class="space-y-1">
                <h4 class="text-sm font-semibold">&#64;nextjs</h4>
                <p class="text-sm">
                    The React Framework &ndash; created and maintained by &#64;vercel.
                </p>
                <div class="text-muted-foreground flex items-center gap-2 pt-2 text-xs">
                    <x-lucide-calendar class="size-4" />
                    <span>Joined December 2021</span>
                </div>
            </div>
        </div>
    </x-ui.hover-card-content>
</x-ui.hover-card>

Instant

<x-ui.hover-card :open-delay="0" :close-delay="0">
    <x-ui.hover-card-trigger>
        <x-ui.button variant="link">Hover (instant)</x-ui.button>
    </x-ui.hover-card-trigger>
    <x-ui.hover-card-content class="w-64">
        <p class="text-sm">This card opens instantly with no delay, then closes as soon as you leave.</p>
    </x-ui.hover-card-content>
</x-ui.hover-card>

User

<x-ui.hover-card>
    <x-ui.hover-card-trigger>
        <x-ui.button variant="link">&#64;sofia</x-ui.button>
    </x-ui.hover-card-trigger>
    <x-ui.hover-card-content class="w-72">
        <div class="flex gap-3">
            <x-ui.avatar><x-ui.avatar-fallback>SC</x-ui.avatar-fallback></x-ui.avatar>
            <div class="space-y-1">
                <h4 class="text-sm font-semibold">Sofia Carter</h4>
                <p class="text-muted-foreground text-sm">Product designer. Building delightful interfaces at Acme.</p>
                <div class="text-muted-foreground flex gap-3 pt-1 text-xs">
                    <span><strong class="text-foreground">128</strong> Following</span>
                    <span><strong class="text-foreground">2.3k</strong> Followers</span>
                </div>
            </div>
        </div>
    </x-ui.hover-card-content>
</x-ui.hover-card>

API Reference

Props, slots and exposed methods for <x-ui.hover-card>.

Props

Prop Type Default Description
openDelay int 400 Milliseconds to wait after the pointer enters or the trigger is focused before the card opens.
closeDelay int 100 Milliseconds to wait after the pointer leaves or focus moves out before the card closes. A short delay lets the pointer travel from trigger to card without it disappearing.
align string 'center' Set on <x-ui.hover-card-content>. Alignment of the card along the chosen side.
center start end
side string 'bottom' Set on <x-ui.hover-card-content>. Which side of the trigger the card is anchored to.
bottom top left right
sideOffset int 4 Set on <x-ui.hover-card-content>. Gap in pixels between the trigger and the card.

Slots

Slot Description
default Holds the <x-ui.hover-card-trigger> and <x-ui.hover-card-content> sub-components. Hovering or focusing the trigger reveals the content.
trigger The hover/focus target. Pass any inline element (a link or button) inside <x-ui.hover-card-trigger>.
content The card body shown on hover, placed inside <x-ui.hover-card-content>. It is teleported to <body> and anchored to the trigger.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
show() Schedules the card to open after openDelay (cancels any pending close).
hide() Schedules the card to close after closeDelay (cancels any pending open).