Skip to content

Tooltip

A visual label for an icon-only button, on hover and keyboard focus. The button keeps its own aria-label; tooltips don't open on touch.

Sourcecomponents/tooltip.tsx

Usage

Tooltip usage
import { Bold } from "lucide-react";import { Button } from "@/components/button";import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/tooltip";
export function TooltipUsage({ toggleBold }: { toggleBold: () => void }) {  return (    <TooltipProvider>      <Tooltip>        <TooltipTrigger render={<Button variant="ghost" size="icon" aria-label="Bold" onClick={toggleBold} />}>          <Bold />        </TooltipTrigger>        <TooltipContent>Bold</TooltipContent>      </Tooltip>    </TooltipProvider>  );}

When to use

Use when

A visual label for an icon-only button that already has a matching aria-label. Wrap toolbars in TooltipProvider

Don’t use when

Anything people need to read: it doesn't open on touch (use inline text or Popover)