maryUI v1 is deprecated! Upgrade to v2 →
maryUI v1

Popover

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

Basic

gsawayn
From: Konopelskiport
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

gsawayn
Eligendi sunt expedita a non ipsam. Animi tempora vel quis et voluptate quia quo tenetur. Id et repellendus hic blanditiis. Qui rerum et delectus sit rerum illo ut. Blanditiis odio ut unde iure vel culpa. 
@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 v1
Sponsor