View Source SaladUI.HoverCard (SaladUI v1.0.0-beta.3)

Implementation of hover card component with positioning and hover interactions.

When a user hovers over the trigger element, the content card appears with a small delay. The card disappears when the user moves away from both the trigger and the content.

Examples:

<.hover_card id="user-hover-card">
  <.hover_card_trigger>
    <.button variant="link">@salad_ui</.button>
  </.hover_card_trigger>
  <.hover_card_content>
    <div class="flex flex-col gap-2">
      <div class="flex items-center gap-3">
        <img src="/images/avatar.png" alt="" class="h-10 w-10 rounded-full" />
        <div>
          <div class="font-semibold">SaladUI</div>
          <div class="text-sm text-muted-foreground">@salad_ui</div>
        </div>
      </div>
      <p class="text-sm">
        UI component library for modern web applications.
      </p>
    </div>
  </.hover_card_content>
</.hover_card>

Summary

Functions

The main hover card component that manages state and positioning.

The hover card content that appears when triggered.

The trigger element that activates the hover card when hovered.

Functions

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.

Attributes

  • id (:string) (required) - Unique identifier for the hover card.
  • open-delay (:integer) - Delay in milliseconds before opening the hover card. Defaults to 300.
  • close-delay (:integer) - Delay in milliseconds before closing the hover card. Defaults to 200.
  • on-open (:any) - Handler for hover card open event. Defaults to nil.
  • on-close (:any) - Handler for hover card close event. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
Link to this function

hover_card_content(assigns)

View Source

The hover card content that appears when triggered.

Options

  • :side - Placement of the hover card relative to the trigger (top, right, bottom, left). Defaults to "top".
  • :align - Alignment of the hover card (start, center, end). Defaults to "center".
  • :side-offset - Distance from the trigger in pixels. Defaults to 4.
  • :align-offset - Offset along the alignment axis. Defaults to 0.
  • :class - Additional CSS classes.

Attributes

  • class (:string) - Defaults to nil.
  • side (:string) - Defaults to "top".
  • align (:string) - Defaults to "center".
  • side-offset (:integer) - Distance from the trigger in pixels. Defaults to 8.
  • align-offset (:integer) - Offset along the alignment axis. Defaults to 0.
  • Global attributes are accepted.

Slots

  • inner_block (required)
Link to this function

hover_card_trigger(assigns)

View Source

The trigger element that activates the hover card when hovered.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)