View Source SaladUI.HoverCard (SaladUI v1.0.0-beta.1)
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 to300
.:close-delay
- Delay in milliseconds before closing the hover card. Defaults to200
.: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 to300
.close-delay
(:integer
) - Delay in milliseconds before closing the hover card. Defaults to200
.on-open
(:any
) - Handler for hover card open event. Defaults tonil
.on-close
(:any
) - Handler for hover card close event. Defaults tonil
.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
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 to4
.:align-offset
- Offset along the alignment axis. Defaults to0
.:class
- Additional CSS classes.
Attributes
class
(:string
) - Defaults tonil
.side
(:string
) - Defaults to"top"
.align
(:string
) - Defaults to"center"
.side-offset
(:integer
) - Distance from the trigger in pixels. Defaults to8
.align-offset
(:integer
) - Offset along the alignment axis. Defaults to0
.- Global attributes are accepted.
Slots
inner_block
(required)
The trigger element that activates the hover card when hovered.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)