Hover Card

A preview card shown on hover — richer than a tooltip, and pointer-only. There is a close delay as well as an open delay, so the pointer can travel into the card without it vanishing.

src/components/ui/hover-card.tsx

About

From the component's own source, where it was written.

A preview card shown on hover — richer than a tooltip, and pointer-only.

There is a close delay as well as an open delay, so the pointer can travel from the trigger into the card without it vanishing on the way.

Deliberately not keyboard-triggered: the content is supplementary, and a keyboard user reaches the same information by following the link. A Popover is the right component when the content must be reachable.

Install

npx astralyx-ui add hover-card

Usage

import { HoverCard } from '@/components/ui/hover-card'

<HoverCard content={<Profile user={user} />}>
  <a href={user.url}>@{user.handle}</a>
</HoverCard>

Composer

Change the props and the source below follows.

Props

side

openDelay

tsx

<HoverCard side="bottom" openDelay={300} content={<Profile />}>
  <Button variant="link">@ada</Button>
</HoverCard>

Examples

On a link

tsx

<HoverCard content={<Profile />}><Button variant="link">@ada</Button></HoverCard>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`HoverCard`

A preview card shown on hover — richer than a tooltip, and pointer-only.

Extends Omit<ComponentProps<'div'>, 'content'>.

Prop	Type	Default	Description
children	ReactNode	required	The trigger, cloned rather than wrapped.
content	ReactNode	required	What the card shows.
side	Side	'bottom'	—
align	Align	'center'	—
openDelay	number	300	The close delay is what lets the pointer travel into the card.
closeDelay	number	200	The close delay is what lets the pointer travel into the card.

Behaviour

Topic	Detail	Description
keyboard	not triggered	Deliberately pointer-only — the content is supplementary. Use Popover when it must be reachable by keyboard.