For sighted users to preview content available behind a link.
livewire - the most productive way to build your next web app
<x-portal::hover-card>
<x-portal::hover-card.trigger>
<x-portal::button variant="link">@portalui</x-portal::button>
</x-portal::hover-card.trigger>
<x-portal::hover-card.content class="w-80" side="bottom" align="center">
<div class="flex justify-between space-x-4">
<x-portal::avatar>
<x-portal::avatar.image src="https://github.com/livewire.png" />
<x-portal::avatar.fallback>lw</x-portal::avatar.fallback>
</x-portal::avatar>
<div class="space-y-1">
<h4 class="text-sm font-semibold">livewire</h4>
<p class="text-sm">
livewire - the most productive way to build your next web app
</p>
<div class="flex items-center pt-2">
<x-tabler-calendar-event-filled class="mr-2 h-4 w-4 opacity-70" />
<span class="text-xs text-muted-foreground">
joined august 2019
</span>
</div>
</div>
</div>
</x-portal::hover-card.content>
</x-portal::hover-card>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:hover-card --force
You can customize the position of the dropdown content via the position and align props
You can first pass the base side:
bottom
top
left
right
hen an alignment modifier like
center
end
start