LifeDS

Component

Hover Card

For sighted users to preview content available behind a link.

HoverCardTriggerdelay · closeDelay · render
HoverCardContentside: top · bottom · left · right — align: start · center · end
Playground

Basic

hover the link to preview

Sides

side="top" · "bottom" · "left" · "right"

Custom open/close delay

delay=0 — opens instantly

Avatar trigger

wrapping an Avatar instead of a link

RTL support

logical sides — "inline-start" · "inline-end"

Tokens used

5 semantic tokens consumed by this component.

--popoverPopover
bg-popover
--popover-foregroundPopover Foreground
text-popover-foreground
--foregroundForeground
text-foreground
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder