HoverCard

<.hover_card id="basic-hc">
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4">
      @shadcn
    </a>
  </.hover_card_trigger>
  <.hover_card_content>
    <div class="flex justify-between space-x-4">
      <.avatar class="size-10">
        <.avatar_fallback>SC</.avatar_fallback>
      </.avatar>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">@shadcn</h4>
        <p class="text-sm">
          The creator of shadcn/ui. Building beautiful component libraries.
        </p>
        <div class="flex items-center pt-2">
          <.icon name="hero-calendar-days-micro" class="mr-2 size-4 opacity-70" />
          <span class="text-xs text-muted-foreground">Joined December 2021</span>
        </div>
      </div>
    </div>
  </.hover_card_content>
</.hover_card>

<.hover_card :for={side <- ~w(top right bottom left)} id={"side-#{side}-hc"}>
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4">
      {String.capitalize(side)}
    </a>
  </.hover_card_trigger>
  <.hover_card_content side={side}>
    <p class="text-sm">Card on the <strong>{side}</strong> side.</p>
  </.hover_card_content>
</.hover_card>

<.hover_card id="fast-hc" open_delay={50} close_delay={100}>
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4">
      Fast (50ms)
    </a>
  </.hover_card_trigger>
  <.hover_card_content>
    <p class="text-sm">I appear quickly!</p>
  </.hover_card_content>
</.hover_card>

<.hover_card id="slow-hc" open_delay={800} close_delay={500}>
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4">
      Slow (800ms)
    </a>
  </.hover_card_trigger>
  <.hover_card_content>
    <p class="text-sm">I take a while to show up.</p>
  </.hover_card_content>
</.hover_card>

<.hover_card id="prog-hc">
  <.hover_card_trigger>
    <a href="#" class="font-medium text-primary underline underline-offset-4">
      @target
    </a>
  </.hover_card_trigger>
  <.hover_card_content>
    <p class="text-sm">Programmatically controlled hover card.</p>
  </.hover_card_content>
</.hover_card>

<.button variant="secondary" phx-click={show_hover_card("prog-hc")}>Show</.button>
<.button variant="secondary" phx-click={hide_hover_card("prog-hc")}>Hide</.button>