Tooltip · Manti UI

Wrap a focusable trigger and pass content. The machine manages placement, delays, focus, hover, and dismissal.

Set interactive only when the pointer must enter the tooltip content. Use placement, controlled open state, and portalled when the trigger lives inside overflow or stacking contexts. portalContainer targets a specific portal host.

import { Button, Tooltip } from '@manti-ui/react';

export default function TooltipBasic() {
  return (
    <>
      <Tooltip content="Backed by a Zag.js machine">
        <Button variant="secondary">Hover or focus me</Button>
      </Tooltip>
      <Tooltip content="Stays open while you hover the label" interactive>
        <Button variant="tertiary">Interactive</Button>
      </Tooltip>
    </>
  );
}

API

Prop	Type	Default	Description
`content`	`ReactNode`	—	The tooltip content.
`children`	`ReactNode`	—	The trigger (wrapped in an inline trigger).
`openDelay`	`number`	—	Delay before opening, in ms.
`closeDelay`	`number`	—	Delay before closing, in ms.
`interactive`	`boolean`	—	Keep open while hovering the content.
`placement`	`Placement`	—	Placement relative to the trigger.
`showArrow`	`boolean`	`true`	Render the arrow pointing at the trigger.
`open / defaultOpen / onOpenChange`	`controlled state`	—	Controlled or uncontrolled open state.
`portalled / portalContainer`	`boolean / RefObject<HTMLElement>`	—	Portal the content, optionally into a custom host.

Styling

Anatomy

Part	Selector	Description
`trigger`	`[data-scope="tooltip"][data-part="trigger"]`	Inline wrapper around the child.
`positioner`	`[data-scope="tooltip"][data-part="positioner"]`	Positions the floating content.
`content`	`[data-scope="tooltip"][data-part="content"]`	The floating label.
`arrow`	`[data-scope="tooltip"][data-part="arrow"]`	The arrow pointing at the trigger.

Tokens

Token	Controls
`--manti-tooltip-max-width`	max width
`--manti-tooltip-z-index`	z index

Last updated 13 September 2026