Как бы вы справились с всплывающим окном Livewire?

Question

Я ищу способ сделать всплывающее окно / всплывающую подсказку в Livewire, желательно без использования Vue.

На данный момент я создал компонент UserPopover Livewire с:

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');
    }
}

И визуализированный компонент:

<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>

В моем app.blade.php файл, который я включил в @livewire('user-popover') и я вызываю компонент с помощью:

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

Я не знаю, что делать дальше. Есть идеи по позиционированию, повторному использованию и общей архитектуре?

Answer 1

Например: вы можете использовать эту подсказку:

Теперь вы можете условно отображать имя класса (класс css содержит стили всплывающих подсказок), когда isOpen имеет значение 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>