HoverCard

Displays additional content when a user hovers over a target element.

Usage

Used to reveal supplemental information when a user hovers or focuses on a target element.

import { HoverCard, Portal } from "@elemnts-ui/react";

<HoverCard.Root>
  <HoverCard.Trigger />
  <Portal>
    <HoverCard.Positioner>
      <HoverCard.Content />
    </HoverCard.Positioner>
  </Portal>
</HoverCard.Root>;

Delays

Control how long after hover or focus the card opens with openDelay and otherwise with closeDelay props.

API Reference

HoverCardRoot

The root component for the hover card.

Prop	Type	Default
closeDelay	`number`	`300`
defaultOpen	`boolean`	`undefined`
defaultTriggerValue	`string`	`undefined`
disabled	`boolean`	`undefined`
hideMode	`HideMode`	`display-none`
id	`string`	`undefined`
ids	`Partial<{trigger: string \| ((value?: string \| undefined) => string) content: string positioner: string arrow: string}>`	`undefined`
immediate	`boolean`	`undefined`
lazyMount	`boolean`	`false`
onExitComplete	`VoidFunction`	`undefined`
onFocusOutside	`(event: FocusOutsideEvent) => void`	`undefined`
onInteractOutside	`(event: InteractOutsideEvent) => void`	`undefined`
onOpenChange	`(details: OpenChangeDetails) => void`	`undefined`
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	`undefined`
onTriggerValueChange	`(details: TriggerValueChangeDetails) => void`	`undefined`
open	`boolean`	`undefined`
openDelay	`number`	`600`
positioning	`PositioningOptions`	`undefined`
present	`boolean`	`undefined`
skipAnimationOnMount	`boolean`	`false`
triggerValue	`string`	`undefined`
unmountOnExit	`boolean`	`false`