How would you handle a Livewire popover?

#1

I am looking for a way to make a popover/tooltip in Livewire, preferably without using Vue.

As of now I have created a UserPopover Livewire component with:

namespace App\Http\Livewire;

use App\User;
use Livewire\Component;

class UserPopover extends Component
{
    public $isOpen = false;
    public $user = null;

    protected $listeners = [
        'closeUserPopover',
        'showUserPopover' => 'open',
    ];

    public function open($username)
    {
        $this->user = User::whereName($username)->first();
        $this->isOpen = true;
    }

    public function closeUserPopover()
    {
        $this->isOpen = false;
    }

    public function render()
    {
        return view('livewire.user-popover');
    }
}

And rendered component:

<div>
    @if($isOpen)
        <div class="user-popover fixed top-0 shadow bg-white p-6 text-sm">
            <h3>{{ $user->name }}</h3>
            <div>{{ $user->profile->bio }}</div>
        </div>
    @endif
</div>

In my app.blade.php file I have included it with @livewire('user-popover') and I am calling the component with:

<a href="{{ route('users.show', $user) }}"
   wire:mouseover="$emit('showUserPopover', {{ $user->name }})"
   wire:mouseout="$emit('closeUserPopover')"
>
    {{ $user->name }}
</a>

I don’t know what to do next. Any ideas on positioning, re-usability and overall architecture?

#2

I think you should be able to use Alpine for this instead of Livewire. The server round trip is probably too slow for a popover.

It’s pretty simple to show a div when you hover over something with Alpine.

<div x-data="{ hover: false }">
  <span x-on:mouseover="hover = true" x-on:mouseout="hover = false">Hover Here</span>
  <span x-show="hover">Shows on Hover</span>
</div>
2 Likes
#3

Here’s a codepen. It works really well.

1 Like
#4

i just add wire:ignore.self and it works

#5

Thanks to the incredible work of Caleb this is now done: