Tooltip

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <div className="p-12">
        <Tooltip>
          <TooltipTrigger render={<Button variant="outline" />}>
            Hover me
          </TooltipTrigger>
          <TooltipContent side="top">Add to library</TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

Tooltip wraps the tooltip primitive of the chosen base. TooltipTrigger is the element that shows the tooltip, and TooltipContent renders the dark label with an arrow in a portal, positioned beside the trigger. TooltipProvider shares open delays across a group of tooltips.

Use tooltips to name icon-only buttons or show a keyboard shortcut. Keep the text short and don't put essential information or interactive content in a tooltip; use Popover for that.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/tooltip

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add tooltip

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

Copy the source into components/ui/tooltip.tsx:

Update the import paths to match your project.

Usage

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent }

Set side on TooltipContent to place the tooltip on another side; it opens above the trigger by default, 4px away. Place a Kbd inside TooltipContent to show a shortcut.

Use the render prop on TooltipTrigger to render it as a Button.

Set asChild on TooltipTrigger to render a Button as the trigger.

The Button placed first inside Tooltip is the trigger.

Wrap your app, or a toolbar of tooltips, in TooltipProvider. This wrapper sets the provider's delay to 0, so tooltips open without waiting.

Examples

Sides

Places tooltips on each of the four sides of their triggers.

With shortcut

Names an icon button and shows its keyboard shortcut with Kbd.

API Reference

Anatomy4 parts

</Tooltip>

</TooltipProvider>

TooltipProvider

Shares delay timing across the tooltips inside it.

Also accepts the props of the primitive part it wraps.

The root that holds a tooltip's open state.

Also accepts the props of the primitive part it wraps.

TooltipTrigger

The element that shows the tooltip on hover or focus.

Also accepts the props of the primitive part it wraps.

TooltipContent

The positioned label with its arrow, rendered in a portal.

Also accepts the props of the primitive parts it wraps.

Accessibility

Tooltips open when the trigger is hovered or receives keyboard focus, and close when the pointer leaves.
Escape closes an open tooltip while focus stays on the trigger.
A tooltip doesn't name its trigger. Give icon-only triggers their own aria-label.

Notes

Parts carry data-slot attributes such as tooltip-trigger and tooltip-content; the popup and arrow set data-side.
The label uses bg-foreground with text-background, so it inverts against the page in both light and dark appearances.
TooltipContent accepts the positioner props side, sideOffset, align and alignOffset.