Hover Card

Mobile

Tablet

Desktop

Usage

HoverCard reveals a floating panel when the user hovers (or focuses) a trigger, letting you preview rich content — a profile, a thumbnail, a summary — without a click or a navigation. Compose it from HoverCard.Trigger and HoverCard.Content using dot notation.

import { HoverCard } from "@blakeui/pro-react";

function Example() {
  return (
    <HoverCard>
      <HoverCard.Trigger>
        <a className="text-accent underline" href="#">
          @blakeui
        </a>
      </HoverCard.Trigger>
      <HoverCard.Content>
        <p className="text-sm text-muted">
          Production-ready React components, built on React Aria and Tailwind CSS.
        </p>
      </HoverCard.Content>
    </HoverCard>
  );
}

With arrow

Add HoverCard.Arrow inside the content to render a pointer connecting the card to its trigger. With no children it draws a default SVG arrow that rotates to match the placement.

<HoverCard>
  <HoverCard.Trigger>
    <a className="text-accent underline" href="#">
      @blakeui
    </a>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <HoverCard.Arrow />
    <p className="text-sm text-muted">Production-ready React components.</p>
  </HoverCard.Content>
</HoverCard>

Custom delays

Tune openDelay and closeDelay (in milliseconds) on the root. Set openDelay to 0 to open instantly, and raise closeDelay to keep the card open longer after the pointer leaves.

<HoverCard closeDelay={600} openDelay={0}>
  <HoverCard.Trigger>
    <span className="font-medium text-foreground underline decoration-dotted">
      Hover me
    </span>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <p className="max-w-56 text-sm text-muted">
      Opens with no delay and waits 600ms before closing.
    </p>
  </HoverCard.Content>
</HoverCard>

Placements

Set placement on HoverCard.Content to position the card relative to the trigger. Supported values include 'top', 'bottom', 'left', and 'right'; the entry animation and arrow rotation follow the placement automatically.

{(["top", "bottom", "left", "right"] as const).map((placement) => (
  <HoverCard key={placement}>
    <HoverCard.Trigger>
      <span className="rounded-lg bg-default px-3 py-1.5 text-sm">{placement}</span>
    </HoverCard.Trigger>
    <HoverCard.Content placement={placement}>
      <HoverCard.Arrow />
      <p className="text-sm text-muted">Placed on the {placement}.</p>
    </HoverCard.Content>
  </HoverCard>
))}

Controlled

Drive the open state yourself with open and onOpenChange. Pass defaultOpen instead for an uncontrolled card with a custom initial state.

import { useState } from "react";
import { HoverCard } from "@blakeui/pro-react";

function Controlled() {
  const [open, setOpen] = useState(false);

  return (
    <HoverCard open={open} onOpenChange={setOpen}>
      <HoverCard.Trigger>
        <a className="text-accent underline" href="#">
          @blakeui
        </a>
      </HoverCard.Trigger>
      <HoverCard.Content>
        <p className="text-sm text-muted">Production-ready React components.</p>
      </HoverCard.Content>
    </HoverCard>
  );
}

Anatomy

Import the HoverCard component and access all parts using dot notation.

import { HoverCard } from "@blakeui/pro-react";

<HoverCard>
  <HoverCard.Trigger />
  <HoverCard.Content>
    <HoverCard.Arrow />
  </HoverCard.Content>
</HoverCard>;

CSS Classes

Element Classes

.hover-card__trigger — Inline wrapper around the trigger element.
.hover-card__content — The floating panel that appears on hover.
.hover-card__arrow — Optional pointing arrow connecting content to trigger.

Interactive States

Entering/Exiting: [data-entering="true"] / [data-exiting="true"] on .hover-card__content (fade + zoom + slide animation).
Placement: [data-placement="top|bottom|left|right"] on .hover-card__content and .hover-card__arrow (directional animations and arrow rotation).

API Reference

The root component. Manages hover state, open/close timing, and context.

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes.
`openDelay`	`number`	`700`	Time in ms before opening after hover.
`closeDelay`	`number`	`300`	Time in ms before closing after pointer/focus leave.
`children`	`ReactNode`	-	Trigger and Content elements.

HoverCard.Trigger

Inline wrapper that tracks hover and focus events on its children.

Also supports all native span HTML attributes.

HoverCard.Content

The floating panel. Wraps RAC Popover.

Prop	Type	Default	Description
`placement`	`Placement`	`'top'`	Popover placement relative to the trigger.
`offset`	`number`	`8`	Distance from the trigger.

Also supports all RAC Popover props except isOpen and triggerRef.

HoverCard.Arrow

Optional pointing arrow. Wraps RAC OverlayArrow. Renders a default SVG arrow when no children are provided.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom arrow element.

Also supports all RAC OverlayArrow props.

Hover Card

On this page