HoverCard

HoverCard shows a preview of additional details when the user hovers over a trigger element.

Code

<HoverCard>
  <HoverCardTrigger
    className="tw:cursor-pointer tw:underline"
    render={<Button variant="link">Green Valley Farm</Button>}
  />

  <HoverCardContent>
    <div className="tw:flex tw:flex-col tw:gap-2">
      <h4 className="tw:text-sm tw:font-semibold">Green Valley Farm</h4>

      <p className="tw:text-sm tw:text-muted-foreground">
        Primary contact: Maria Larsen. Current balance: $12,450.
      </p>

      <p className="tw:text-xs tw:text-muted-foreground">
        Last order placed 2 days ago
      </p>
    </div>
  </HoverCardContent>
</HoverCard>

API

HoverCard

Name	Type/Description
actionsRef	RefObject<PreviewCardRootActions | null> | undefined A ref to imperative actions. - `unmount`: Unmounts the preview card popup. - `close`: Closes the preview card imperatively when called.
children	ReactNode | PayloadChildRenderFunction<unknown> The content of the preview card. This can be a regular React node or a render function that receives the `payload` of the active trigger.
defaultOpen = false	boolean | undefined Whether the preview card is initially open. To render a controlled preview card, use the `open` prop instead.
defaultTriggerId	string | null | undefined ID of the trigger that the preview card is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.
handle	PreviewCardHandle<unknown> | undefined A handle to associate the preview card with a trigger. If specified, allows external triggers to control the card's open state. Can be created with the PreviewCard.createHandle() method.
onOpenChange	((open: boolean, eventDetails: PreviewCardRootChangeEventDetails) => void) | undefined Event handler called when the preview card is opened or closed.
onOpenChangeComplete	((open: boolean) => void) | undefined Event handler called after any animations complete when the preview card is opened or closed.
open	boolean | undefined Whether the preview card is currently open.
triggerId	string | null | undefined ID of the trigger that the preview card is associated with. This is useful in conjunction with the `open` prop to create a controlled preview card. There's no need to specify this prop when the preview card is uncontrolled (that is, when the `open` prop is not set).

HoverCardContent

Name	Type/Description
align = "center"	Align | undefined How to align the popup relative to the specified side.
alignOffset = 4	number | OffsetFunction | undefined Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner alignOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.width : anchor.height; }} /> ```
className	string | ((state: PreviewCardPopupState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PreviewCardPopupState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
side = "bottom"	Side | undefined Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
sideOffset = 4	number | OffsetFunction | undefined Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner sideOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.height : anchor.width; }} /> ```
style	CSSProperties | ((state: PreviewCardPopupState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.

HoverCardTrigger

Name	Type/Description
className	string | ((state: PreviewCardTriggerState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
closeDelay = 300	number | undefined How long to wait before closing the preview card. Specified in milliseconds.
delay = 600	number | undefined How long to wait before the preview card opens. Specified in milliseconds.
handle	PreviewCardHandle<unknown> | undefined A handle to associate the trigger with a preview card.
payload	unknown A payload to pass to the preview card when it is opened.
ref	((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PreviewCardTriggerState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: PreviewCardTriggerState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.