Salad UI

Hover Card

The main hover card component that manages state and positioning.

Read more Read less

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.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the hover card
open-delay :integer

Delay in milliseconds before opening the hover card
300
close-delay :integer

Delay in milliseconds before closing the hover card
200
on-open :any

Handler for hover card open event
on-close :any

Handler for hover card close event
class :string
rest :global
Required inner_block * :slot 
<.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>