maryUI

Popover

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

Basic

lehner.kaia
From: Lake Laurychester
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

lehner.kaia
Sit quae quaerat in rem dolor quia dicta. Sed optio doloremque sint exercitationem rerum eius accusantium. Quasi aut voluptas earum nisi rerum eum. Fugiat voluptates nihil aut in qui laborum earum. 
@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.