Popover

<.popover id="my-popover">
  <:trigger>
    <span class="btn">Open Popover</span>
  </:trigger>
  <div>
    <p>Popover content goes here.</p>
  </div>
</.popover>

<.popover id="top" side="top">
  <:trigger><span class="btn btn-outline">Top</span></:trigger>
  <p>Content</p>
</.popover>
<.popover id="bottom" side="bottom">
  <:trigger><span class="btn btn-outline">Bottom</span></:trigger>
  <p>Content</p>
</.popover>

<.popover id="form-popover">
  <:trigger><span class="btn">Update dimensions</span></:trigger>
  <div class="w-72">
    <div class="grid gap-3">
      <div class="grid grid-cols-3 items-center gap-4">
        <.label for="width">Width</.label>
        <.input id="width" value="100%" class="col-span-2" />
      </div>
    </div>
  </div>
</.popover>

<.popover id="dynamic">
  <:trigger :let={open}>
    <span class="btn btn-secondary">
      {if open, do: "Close", else: "Open"} Popover
    </span>
  </:trigger>
  <p>Content</p>
</.popover>

<.popover id="profile">
  <:trigger>
    <.avatar src="/avatar.png" />
  </:trigger>
  <div class="w-64">
    <div class="flex items-center gap-3">
      <.avatar src="/avatar.png" size="lg" />
      <div>
        <p class="font-medium">John Doe</p>
        <p class="text-sm text-muted-foreground">john@example.com</p>
      </div>
    </div>
  </div>
</.popover>