Tooltip

Installation

Usage

import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>;

Grouping Tooltips

To group multiple tooltips so they appear instantly after the first one is opened, wrap them in TooltipProvider. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 1
    </TooltipTrigger>
    <TooltipPopup>Content 1</TooltipPopup>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 2
    </TooltipTrigger>
    <TooltipPopup>Content 2</TooltipPopup>
  </Tooltip>
</TooltipProvider>

Examples

With Arrow

You can pass showArrow as true to TooltipPopup to show arrow on tooltip. By default, it is false.

Sides

You can pass side to TooltipPopup to set the side of the tooltip. By default, it is top.

Offset

You can pass sideOffset to TooltipPopup to change the offset of the tooltip. By default, it is 4.

Controlled

Delay

You can control the open and close delay of the tooltip with delay and closeDelay props on TooltipTrigger component.

Custom Content

Animation Presets

You can pass animationPreset to TooltipPopup to set the animation preset of the tooltip. By default, it is scale.

Scale

Fade

Slide Outside

Slide Inside

Wipe

Wipe Scale

Motion

Motion Blur

Base UI vs Radix UI

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with Pure UI quickly.

Quick Checklist

• Replace asChild → render on TooltipTrigger
• Prefer TooltipPopup instead of TooltipContent
• If you used asChild on parts, switch to the render prop

Comparison Example

<Tooltip>
  <TooltipTrigger
    asChild
    render={<Button variant="outline" />}
  >
    <Button variant="outline">Hover me</Button>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>