Salad UI - Hover Card

Hover Card

The main hover card component that manages state and positioning.

Options

:id - Required unique identifier for the hover card.
:open-delay - Delay in milliseconds before opening the hover card. Defaults to 300.
:close-delay - Delay in milliseconds before closing the hover card. Defaults to 200.
:on-open - Handler for hover card open event.
:on-close - Handler for hover card close event.
:class - Additional CSS classes.

Component events

:on-open - Fired when the hover card opens.
:on-close - Fired when the hover card closes.

Default hover card with user profile Open in playground

<.hover_card id="hover-card-single-default" open-delay={300} close-delay={200}>
  <.hover_card_trigger>
    <.button variant="link">@salad_ui</.button>
  </.hover_card_trigger>
  <.hover_card_content side="bottom" align="center">
    <div class="flex justify-between space-x-4">
      <.avatar>
        <.avatar_image src="https://github.com/vercel.png">
        </.avatar_image>
        <.avatar_fallback>
          VC
        </.avatar_fallback>
      </.avatar>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">
          @salad_ui
        </h4>
        <p class="text-sm">LiveView component library inspired by shadcn</p>
        <div class="flex items-center pt-2">
          <span class="text-xs text-muted-foreground">
            Joined May 2024
          </span>
        </div>
      </div>
    </div>
  </.hover_card_content>
</.hover_card>

Hover card placement relative to its trigger. Open in playground

<.hover_card id="hover-card-side-examples-top">
  <.hover_card_trigger>
    <.button variant="outline" size="sm">Top</.button>
  </.hover_card_trigger>
  <.hover_card_content side="top" align="center">
    <p class="text-sm">Content appears above the trigger.</p>
  </.hover_card_content>
</.hover_card>
<.hover_card id="hover-card-side-examples-right">
  <.hover_card_trigger>
    <.button variant="outline" size="sm">Right</.button>
  </.hover_card_trigger>
  <.hover_card_content side="right" align="center">
    <p class="text-sm">Content appears to the right of the trigger.</p>
  </.hover_card_content>
</.hover_card>
<.hover_card id="hover-card-side-examples-bottom">
  <.hover_card_trigger>
    <.button variant="outline" size="sm">Bottom</.button>
  </.hover_card_trigger>
  <.hover_card_content side="bottom" align="center">
    <p class="text-sm">Content appears below the trigger.</p>
  </.hover_card_content>
</.hover_card>
<.hover_card id="hover-card-side-examples-left">
  <.hover_card_trigger>
    <.button variant="outline" size="sm">Left</.button>
  </.hover_card_trigger>
  <.hover_card_content side="left" align="center">
    <p class="text-sm">Content appears to the left of the trigger.</p>
  </.hover_card_content>
</.hover_card>

Different alignment options (start, center, end) Open in playground

<.hover_card
  id="hover-card-single-alignment-variations"
  class="flex justify-around items-center gap-8"
>
  <div>
    <.hover_card id="bottom-start-card">
      <.hover_card_trigger>
        <.button variant="outline" size="sm">Bottom Start</.button>
      </.hover_card_trigger>
      <.hover_card_content side="bottom" align="start">
        <p class="text-sm">Aligned to the bottom start</p>
      </.hover_card_content>
    </.hover_card>
  </div>
  <div>
    <.hover_card id="bottom-center-card">
      <.hover_card_trigger>
        <.button variant="outline" size="sm">Bottom Center</.button>
      </.hover_card_trigger>
      <.hover_card_content side="bottom" align="center">
        <p class="text-sm">Aligned to the bottom center</p>
      </.hover_card_content>
    </.hover_card>
  </div>
  <div>
    <.hover_card id="bottom-end-card">
      <.hover_card_trigger>
        <.button variant="outline" size="sm">Bottom End</.button>
      </.hover_card_trigger>
      <.hover_card_content side="bottom" align="end">
        <p class="text-sm">Aligned to the bottom end</p>
      </.hover_card_content>
    </.hover_card>
  </div>
</.hover_card>