HoverCard

Hover-triggered card that portals to document.body so it's never clipped by an ancestor's overflow. Four sides, configurable enter + exit delays, smooth fade-in.

Hover the avatar — a card portals to the body with a 200ms enter delay.

Usage

import { HoverCard, Avatar } from '@bwo-ui/react';

<HoverCard
  side="bottom"
  trigger={<Avatar fallback="AR" />}
>
  <ProfilePreview user={ana} />
</HoverCard>

Props

Prop	Type	Default	Description
`trigger`	`ReactElement`	—	Element that opens the card on hover/focus.
`children`	`ReactNode`	—	Card content.
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Anchor side.
`offset`	`number`	`10`	Distance from the trigger in px.
`openDelay`	`number`	`200`	Hover-in delay in ms.
`closeDelay`	`number`	`150`	Hover-out delay in ms.
`width`	`number`	`280`	Fixed card width in px.