Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Hover Card

For sighted users to preview content available behind a link. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::hover-card>
    <x-slot:content>
        <div class="flex gap-3">
            <x-slate::avatar fallback="EL" class="size-10" />
            <div class="space-y-1">
                <p class="text-sm font-medium">Electrik</p>
                <p class="text-sm text-muted-foreground">Laravel apps, without the boilerplate.</p>
            </div>
        </div>
    </x-slot:content>
    <x-slate::button variant="link">@electrik</x-slate::button>
</x-slate::hover-card>

Composition
code 
HoverCard
├── HoverCardTrigger
└── HoverCardContent
Last updated .