Portal UI

Hover Card

For sighted users to preview content available behind a link.

lw

livewire

livewire - the most productive way to build your next web app

joined august 2019 
<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>

Publishing Component

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