Popover
This component uses the the built-in Alpine's anchor plugin.
Basic
mbrekke
From: North Martinafurt
Email: mustafa.wintheiser@example.net
Email: mustafa.wintheiser@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
mbrekke
@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