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>Documentation</.button>
</.hover_card_trigger>
<.hover_card_content side="right" align="start">
  <div class="space-y-2">
    <h4 class="text-sm font-semibold">HoverCard Component</h4>
    <p class="text-sm text-muted-foreground">
      The hover card component displays floating content when a trigger element is hovered.
      Perfect for user profiles, tooltips, and rich previews.
    </p>
    <div class="flex justify-end">
      <.button size="sm" variant="outline">View Docs</.button>
    </div>
  </div>
</.hover_card_content>