Livewire v4 released! try it →
maryUI

Popover

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

Basic

tania70
From: Greggfort
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

tania70
Ducimus vitae vitae esse unde ipsam officiis. Est doloribus debitis assumenda autem aliquam at est quaerat. Et aut officia totam rerum reiciendis repellendus. Eos autem est sed perspiciatis velit eligendi. 
@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.