<.tooltip id="tooltip-single-default">
  <.tooltip_trigger>
    <.button variant="outline" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Hover me
    </.button>
  </.tooltip_trigger>
  <.tooltip_content>
    Add to library
  </.tooltip_content>
</.tooltip>

<.tooltip id="tooltip-single-side-bottom">
  <.tooltip_trigger>
    <.button variant="outline" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Bottom
    </.button>
  </.tooltip_trigger>
  <.tooltip_content side="bottom">
    Tooltip on bottom
  </.tooltip_content>
</.tooltip>

<.tooltip id="tooltip-single-side-left">
  <.tooltip_trigger>
    <.button variant="outline" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Left
    </.button>
  </.tooltip_trigger>
  <.tooltip_content side="left">
    Tooltip on left
  </.tooltip_content>
</.tooltip>

<.tooltip id="tooltip-single-side-right">
  <.tooltip_trigger>
    <.button variant="outline" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Right
    </.button>
  </.tooltip_trigger>
  <.tooltip_content side="right">
    Tooltip on right
  </.tooltip_content>
</.tooltip>

<.tooltip id="tooltip-single-custom-class">
  <.tooltip_trigger>
    <.button variant="outline" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Custom
    </.button>
  </.tooltip_trigger>
  <.tooltip_content class="bg-destructive text-destructive-foreground">
    Danger tooltip
  </.tooltip_content>
</.tooltip>