<.hover_card id="hover-card-single-default">
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      @shadcn
    </a>
  </.hover_card_trigger>
  <.hover_card_content>
    <p class="text-sm">The creator of shadcn/ui.</p>
  </.hover_card_content>
</.hover_card>

<.hover_card id="hover-card-single-side-top">
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Top
    </a>
  </.hover_card_trigger>
  <.hover_card_content side="top">
    <p class="text-sm">Card on top.</p>
  </.hover_card_content>
</.hover_card>

<.hover_card id="hover-card-single-side-right">
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Right
    </a>
  </.hover_card_trigger>
  <.hover_card_content side="right">
    <p class="text-sm">Card on right.</p>
  </.hover_card_content>
</.hover_card>

<.hover_card id="hover-card-single-custom-class">
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4" onclick="this.closest('[phx-hook]').dispatchEvent(new Event('phx-shadcn:show'))">
      Custom
    </a>
  </.hover_card_trigger>
  <.hover_card_content class="w-80">
    <p class="text-sm">This card has a wider width override.</p>
  </.hover_card_content>
</.hover_card>