Overlays

Hover card

A rich preview that appears on hover and on focus — a user card on an

Client component3 exportsSource

Import

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@the_viveksingh/vivek-ui'

A user card on a mention

Opens on hover after an intent delay, and on focus immediately - a keyboard user gets the same preview a mouse user does. Not modal, not focus-trapping: the page behind stays interactive, and everything in the card must also be reachable somewhere else.

Shipped by @vivek this morning.

Hover the mention, or Tab to it — the card opens on focus too, immediately, because a keyboard user should not be denied a preview a mouse user gets. Everything in the card is also reachable elsewhere; a hover card is a shortcut, never the only path.

<HoverCard>
  <HoverCardTrigger href="/team/vivek">@vivek</HoverCardTrigger>
  <HoverCardContent>
    <Stack direction="horizontal" gap={3}>
      <Avatar name="Vivek Kumar Singh" size="lg" />
      <Stack gap={1}>
        <Text weight="semibold">Vivek Kumar Singh</Text>
        <Text size="sm" tone="muted">Author of VivekUI.</Text>
      </Stack>
    </Stack>
  </HoverCardContent>
</HoverCard>

// Delays are tunable; moving from trigger into the card never closes it.
<HoverCard openDelay={200} closeDelay={300}>...</HoverCard>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for HoverCard
PropTypeDefaultDescription
childrenReactNode——
openboolean—Controlled open state.
defaultOpenboolean—Initial open state while uncontrolled. Default `false`.
onOpenChange(open: boolean) => void——
openDelaynumber—Delay before a hover opens the card, ms. Default `300` — longer than a tooltip's, because a card is heavier than a tip and a pointer merely passing over a list of mentions must not open one preview per name. Keyboard focus ignores this and opens immediately: the delay exists to filter out accidental hovers, and pressing Tab is never accidental.
closeDelaynumber—Delay before the card closes after the pointer leaves, ms. Default `150`. Must stay above zero: it is the window in which the pointer can cross the gap from the trigger onto the card itself without the card vanishing underneath it.

Exports

HoverCardHoverCardContentHoverCardTrigger

Rendering