maryUI

Popover

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

Basic

ttremblay
From: Gildaland
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

ttremblay
Animi delectus et qui aspernatur ea doloremque eos. Quas fugit nobis architecto ipsum magni sed quis. Deleniti aperiam recusandae facere veritatis ipsam quia. Quo error fugiat ducimus recusandae voluptate ad modi id. 
@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.