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 
<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>