How would you handle a Livewire popover? - laravel

Question

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?

Answer 1

For Example: you can use this tooltip :
Now, you can conditionally render class name (css class contains tooltip styles ) when isOpen is true.
<a class="{{ $isOpen ? 'tooltip' : '' }}" href="{{ route('users.show', $user) }}"
wire:mouseover="$emit('showUserPopover', {{ $user->name }})"
wire:mouseout="$emit('closeUserPopover')"
>
<span class="{{ $isOpen ? 'tooltiptext' : '' }}"> {{ $user->name }} </span>
</a>