maryUI

Popover

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

Basic

kbeahan
From: Marshallchester
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

kbeahan
Et eligendi odit fugit ea magni. Aut repudiandae accusamus et similique et. Sed dolores deleniti qui velit dolor perspiciatis numquam. Officiis atque consequatur et velit laborum consequatur animi iure. 
@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.