HoverCard

Display

A rich floating card triggered on hover. Perfect for user profile previews or link previews.

Props

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred side.
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to trigger.
`openDelay`	`number`	`200`	Delay in ms before opening.
`closeDelay`	`number`	`100`	Delay in ms before closing.

Examples

User profile

@antoine

vue

<DsHoverCard side="bottom" align="start">
  <template #trigger>
    <span class="text-ds-primary underline underline-offset-2 cursor-pointer text-sm">@antoine</span>
  </template>
  <div class="flex items-center gap-3 mb-3">
    <div class="size-10 rounded-full bg-ds-primary-subtle flex items-center justify-center">
      <span class="text-sm font-bold text-ds-primary">AG</span>
    </div>
    <div>
      <p class="text-sm font-semibold text-ds-fg">Antoine Gourgue</p>
      <p class="text-xs text-ds-fg-muted">Staff Frontend Engineer</p>
    </div>
  </div>
  <p class="text-xs text-ds-fg-muted">Building design systems with Nuxt 4 and Tailwind CSS.</p>
</DsHoverCard>

Skeleton

Use DsHoverCardSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsHoverCardSkeleton />

Accessibility

role="tooltip" on the card.
Delay prevents accidental triggers.

EmptyState

Kbd