new
Livewire Volt extension for VSCode. Voltage →
maryUI

Popover

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

Basic

glover.shawn
From: Schowaltermouth
Email: grady.orin@example.org 
@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

glover.shawn
Minus illum aut ducimus ipsum necessitatibus. Commodi fugit voluptatum maxime nostrum consequuntur. 
@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