Popover

This component uses the the built-in Alpine's anchor plugin.

Basic

gutmann.kadin
From: New Bryce
Email: ipadberg@example.net
@php
$user = App\Models\User::first();
@endphp
<x-popover>
<x-slot:trigger>
<x-avatar :image="$user->avatar" :title="$user->username" />
</x-slot:trigger>
<x-slot:content>
From: {{ $user->city->name }} <br>
Email: {{ $user->email }}
</x-slot:content>
</x-popover>

Position and Offset

As this component uses Alpine's anchor plugin, you can use same parameters described on its docs for offset and position.

How are you?
<x-popover position="top-start" offset="20">
<x-slot:trigger>
<x-button label="Hey" />
</x-slot:trigger>
<x-slot:content>
How are you?
</x-slot:content>
</x-popover>

Styling

gutmann.kadin
Dolore neque eum ullam reiciendis rerum maiores. Error ut dignissimos architecto tempore laborum. Et at veritatis totam est. Velit laboriosam ex qui.
@php
$user = App\Models\User::first();
@endphp
<x-popover>
<x-slot:trigger class="bg-base-200 p-2 rounded-lg">
{{ $user->username }}
</x-slot:trigger>
<x-slot:content class="border border-warning !w-40 text-sm">
<x-avatar :image="$user->avatar" />
{{ $user->bio }}
</x-slot:content>
</x-popover>

maryUI
Sponsor