Installation

Barrel

Granular

Usage

export default function Example() {
  return (
    <Tooltip content="Tooltip text" render={<Button />}>
      Hover me
    </Tooltip>
  );
}

For delay grouping across multiple tooltips, see TooltipProvider.

Examples

Basic Tooltip

Multiple Tooltips

Delay Control

Use delay to control how long to wait before opening (default: 600ms) and closeDelay to control how long to wait before closing (default: 0ms).

TooltipProvider groups multiple tooltips so that after the first tooltip has been shown, switching to another skips the open delay. Place it once at your app root or layout — not around each individual Tooltip.

// Wrap your app or layout once
<TooltipProvider>
  <App />
</TooltipProvider>

// Then use Tooltip anywhere inside
<Tooltip content="Add" render={<Button shape="square" icon={PlusIcon} />} />

API Reference

Tooltip

TooltipProvider