Hover Card

Usage

import { HoverCard } from "@chakra-ui/react"

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Positioner>
    <HoverCard.Content>
      <HoverCard.Arrow>
        <HoverCard.ArrowTip />
      </HoverCard.Arrow>
    </HoverCard.Content>
  </HoverCard.Positioner>
</HoverCard.Root>

Shortcuts

The HoverCard provides a shortcuts for common use cases.

Arrow

The HoverCard.Arrow renders the HoverCard.ArrowTip component within in by default.

This works:

<HoverCard.Arrow>
  <HoverCard.ArrowTip />
</HoverCard.Arrow>

This might be more concise, if you don't need to customize the arrow tip.

<HoverCard.Arrow />

Examples

Controlled

Use the open and onOpenChange to control the visibility of the hover card.

Delays

Control the open and close delays using the openDelay and closeDelay props.

Placement

Use the positioning.placement prop to configure the underlying floating-ui positioning logic.

Disabled

Use the disabled prop to prevent opening the hover card on interaction.

Open From Dialog

To use the HoverCard within a Dialog, you need to avoid portalling the HoverCard.Positioner to the document's body.

-<Portal>
  <HoverCard.Positioner>
    <HoverCard.Content>
    </HoverCard.Content>
  </HoverCard.Positioner>
-</Portal>

Accessibility

HoverCard should be used solely for supplementary information that is not essential for understanding the context.

It is inaccessible to screen readers and cannot be activated via keyboard, so avoid placing crucial content within it.

Props

Explorer

Explore the Hover Card component parts interactively. Click on parts in the sidebar to highlight them in the preview.