maryUI

Popover

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

Basic

kailey.glover
From: Kolbymouth
Email: [email protected] 
@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

kailey.glover
Et ipsam laboriosam ut nesciunt optio et. Cupiditate ut reprehenderit molestiae quisquam explicabo. 
@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>
Made with by Robson Tenório and contributors.