SaladUI.HoverCard (SaladUI v1.0.0)

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>

Component events

:on-open - Maps the open event. Fired when the hover card enters open state.
:on-close - Maps the close event. Fired when the hover card enters closed state.

Hover card is a pure client-side interaction (hover/focus driven) and does not support SaladUI.LiveView.send_command/4.

Summary

Functions

hover_card(assigns)

The main hover card component that manages state and positioning.

hover_card_content(assigns)

The hover card content that appears when triggered.

hover_card_trigger(assigns)

The trigger element that activates the hover card when hovered.

Functions

hover_card(assigns)

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.

Component events

:on-open - Fired when the hover card opens.
:on-close - Fired when the hover card closes.

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)

hover_card_content(assigns)

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". Must be one of "top", "right", "bottom", or "left".
align (:string) - Defaults to "center". Must be one of "start", "center", or "end".
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)

hover_card_trigger(assigns)

The trigger element that activates the hover card when hovered.

Attributes

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

Slots

inner_block (required)