HoverCard · Manti UI

Pass a React element as trigger and the preview as children. The machine manages delays, focus behavior, and placement.

import { HoverCard, Text } from '@manti-ui/react';

export default function HoverCardBasic() {
  return (
    <HoverCard
      trigger={
        <a
          href="https://en.wikipedia.org/wiki/Manti_(food)"
          target="_blank"
          rel="noreferrer"
        >
          @manti
        </a>
      }
    >
      <div className="grid gap-1">
        <strong>Mantı</strong>
        <Text as="span" emphasis="muted">
          Tiny Turkish dumplings served under garlicky yogurt and chili butter.
        </Text>
      </div>
    </HoverCard>
  );
}

API

Prop	Type	Default	Description
`trigger`	`ReactElement`	—	Element that reveals the card on hover or focus. Cloned with the machine trigger props.
`children`	`ReactNode`	—	The card content.
`placement`	`'top' \| 'bottom' \| 'left' \| 'right' \| '…-start' \| '…-end'`	`'bottom'`	Placement of the card relative to the trigger.
`showArrow`	`boolean`	`true`	Render the arrow pointing at the trigger.
`openDelay`	`number`	—	Delay before opening, in milliseconds.
`closeDelay`	`number`	—	Delay before closing, in milliseconds.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes.

Styling

Anatomy

Part	Selector	Description
`positioner`	`[data-scope="hover-card"][data-part="positioner"]`	Floating wrapper that positions the card against the trigger.
`content`	`[data-scope="hover-card"][data-part="content"]`	The translucent preview panel.
`arrow`	`[data-scope="hover-card"][data-part="arrow"]`	Arrow pointing back at the trigger.

Tokens

Token	Controls
`--manti-hover-card-max-width`	max width

Last updated 13 September 2026