Tooltip

A popup that displays information related to an element when hovered or focused, built on the Base UI Tooltip primitive.

TSX
"use client";

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

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <Button variant="outline" aria-label="Add to library">
              Hover me
            </Button>
          }
        />
        <TooltipContent>Add to library</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Installation

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/tooltippnpm dlx shadcn@latest add @sevenui/tooltipyarn dlx shadcn@latest add @sevenui/tooltipbunx --bun shadcn@latest add @sevenui/tooltip

Usage

TSX
"use client";

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

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <Button variant="outline" aria-label="Add to library">
              Hover me
            </Button>
          }
        />
        <TooltipContent>Add to library</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Accessibility

Base UI treats tooltips as supplementary visual labels: the popup carries no role="tooltip" or aria-describedby wiring by design. Screen reader users hear the trigger’s accessible name instead — so whenever the trigger’s visible content doesn’t match the tooltip (icon buttons, “Hover me” style triggers), give the trigger an aria-label that mirrors the tooltip text.

API reference

Tooltips are intentionally disabled on touch devices (Base UI behavior — there’s no hover to trigger them); for info icons that need to work on touch, use a Popover with openOnHover instead.

TooltipProvider

Shares open/close delays across every tooltip it wraps — once one tooltip has opened, moving to another within the timeout window opens the next one instantly, skipping its own delay.

TooltipTrigger

Extends the Base UI Tooltip Trigger — delays live here (Base UI 1.7 moved them off the Root). Use the render prop for the trigger element: render={<Button variant="outline" />}.

TooltipContent

side defaulting to top makes Tooltip the only overlay in the registry whose default isn’t bottom.