您将如何处理 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

例如：你可以使用this tooltip：

现在，当 isOpen 为 true 时，您可以有条件地渲染类名（css 类包含工具提示样式）。

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