maryUI

Popover

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

Basic

rwehner
From: East Emmett
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

rwehner
Tenetur illum ut aut itaque inventore accusamus rem. Modi repudiandae et cupiditate voluptatem animi non tempora. Nulla debitis sint voluptates fugiat saepe facilis. Et repudiandae aut enim id voluptatibus reiciendis nobis suscipit. 
@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.