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="secondary">Package Info</.button>
</.hover_card_trigger>
<.hover_card_content side="left" align="center">
  <div class="space-y-2">
    <div class="flex items-center justify-between">
      <h4 class="text-sm font-semibold">SaladUI Package</h4>
      <.badge variant="outline">v1.0.0</.badge>
    </div>
    <p class="text-sm text-muted-foreground">
      A collection of UI components for Phoenix LiveView applications.
      Built with accessibility and performance in mind.
    </p>
    <ul class="text-sm space-y-1">
      <li class="flex items-center text-muted-foreground">
        <.icon name="hero-check-circle" class="w-4 h-4 mr-2 text-green-500"/>
        100% Accessible
      </li>
      <li class="flex items-center text-muted-foreground">
        <.icon name="hero-check-circle" class="w-4 h-4 mr-2 text-green-500"/>
        State Management
      </li>
    </ul>
  </div>
</.hover_card_content>