Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipDescription,
  TooltipProvider,
  TooltipTrigger,
} from "@notion-kit/ui/primitives";

export default function Demo() {
  return (
    <TooltipProvider>
      <div className="flex items-center gap-2">
        <Tooltip>
          <TooltipTrigger render={<Button size="md">Basic</Button>} />
          <TooltipContent>
            <TooltipDescription text="Add to library" />
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger render={<Button size="md">Details</Button>} />
          <TooltipContent>
            <TooltipDescription text="Open search" />
            <TooltipDescription type="secondary" text="⌘ K" />
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

import {  Button,  Tooltip,  TooltipContent,  TooltipDescription,  TooltipProvider,  TooltipTrigger,} from "@notion-kit/ui/primitives";export default function Demo() {  return (    <TooltipProvider>      <div className="flex items-center gap-2">        <Tooltip>          <TooltipTrigger render={<Button size="md">Basic</Button>} />          <TooltipContent>            <TooltipDescription text="Add to library" />          </TooltipContent>        </Tooltip>        <Tooltip>          <TooltipTrigger render={<Button size="md">Details</Button>} />          <TooltipContent>            <TooltipDescription text="Open search" />            <TooltipDescription type="secondary" text="⌘ K" />          </TooltipContent>        </Tooltip>      </div>    </TooltipProvider>  );}

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Anatomy

Compose the Base UI tooltip parts directly when you need custom content or positioning. Use render to merge the trigger behavior into your button.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button>Open search</Button>} />
    <TooltipContent>
      {...}
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

TooltipDescription supports primary text, secondary text, and images:

<TooltipContent>
  <TooltipDescription text="Open search" />
  <TooltipDescription type="secondary" text="⌘ K" />
  <TooltipDescription type="image" text="/search-preview.png" />
</TooltipContent>

API Reference

TooltipProvider

Uses Base UI provider props. The default delay is 600 milliseconds. Use timeout to control how long subsequent tooltips skip the opening delay.

TooltipTrigger

Uses Base UI trigger props. Pass a React element to render to avoid adding a wrapper around the trigger.

TooltipContent

Accepts Base UI popup props plus align, alignOffset, anchor, collisionPadding, side, and sideOffset. Its default sideOffset is 4.

TooltipDescription

Prop	Type	Default	Description
`text`*	`string`	-	Text content or the image URL.
`type`	`"primary" \| "secondary" \| "image"`	`"primary"`	Controls the description treatment.
`className`	`string`	-	Adds local presentation classes.