maryUI

Popover

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

Basic

ccrooks
From: South Berthafurt
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

ccrooks
Quia laborum quidem sequi sint quasi. Exercitationem consequatur dolorem enim quia. Sequi sed consequatur debitis et tempora pariatur necessitatibus sequi. Unde ut eligendi corporis rerum voluptatem sed quod ut. 
@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.