HoverCard

Preview card shown on hover or keyboard focus of its trigger. Built on the popover primitive for placement and collision handling; it never takes focus and closes on Escape.

Import

import { HoverCard } from "@jcsoftdev/ui/overlays";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/overlays/hover-card.

Usage

export const Default: Story = {
  render: (args) => (
    <HoverCard {...args}>
      <Barbero />
    </HoverCard>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
children *	ReactNode
open	boolean		Controlled open state.
defaultOpen	boolean	false
onOpenChange	((open: boolean) => void)
openDelay	number	300	ms before opening on hover (focus opens at once).
closeDelay	number	150	ms before closing, so the pointer can travel into the card.

* marks a required prop.

Storybook stories

• Default
• Open By Default
• Narrow
• Brutal Preset

Source

packages/ui/src/overlays/hover-card/hover-card.tsx