title: How would you handle a Livewire popover?
body: <p>I am looking for a way to make a popover/tooltip in Livewire, preferably without using Vue. </p>
  
  <p>As of now I have created a UserPopover Livewire component with:</p>
  
  <pre><code>namespace App\Http\Livewire;
  
  use App\User;
  use Livewire\Component;
  
  class UserPopover extends Component
  {
      public $isOpen = false;
      public $user = null;
  
      protected $listeners = [
          'closeUserPopover',
          'showUserPopover' =&gt; 'open',
      ];
  
      public function open($username)
      {
          $this-&gt;user = User::whereName($username)-&gt;first();
          $this-&gt;isOpen = true;
      }
  
      public function closeUserPopover()
      {
          $this-&gt;isOpen = false;
      }
  
      public function render()
      {
          return view('livewire.user-popover');
      }
  }
  </code></pre>
  
  <p>And rendered component:</p>
  
  <pre><code>&lt;div&gt;
      @if($isOpen)
          &lt;div class="user-popover fixed top-0 shadow bg-white p-6 text-sm"&gt;
              &lt;h3&gt;{{ $user-&gt;name }}&lt;/h3&gt;
              &lt;div&gt;{{ $user-&gt;profile-&gt;bio }}&lt;/div&gt;
          &lt;/div&gt;
      @endif
  &lt;/div&gt;
  </code></pre>
  
  <p>In my <code>app.blade.php</code> file I have included it with <code>@livewire('user-popover')</code> and I am calling the component with:</p>
  
  <pre><code>&lt;a href="{{ route('users.show', $user) }}"
     wire:mouseover="$emit('showUserPopover', {{ $user-&gt;name }})"
     wire:mouseout="$emit('closeUserPopover')"
  &gt;
      {{ $user-&gt;name }}
  &lt;/a&gt;
  </code></pre>
  
  <p>I don't know what to do next. Any ideas on positioning, re-usability and overall architecture?</p>