overlay

Tooltip

A short text hint shown on hover and keyboard focus. Includes its own provider.

npx blankui add tooltip

Raw markdown for agents Registry JSON

When to use

Naming an icon-only button for sighted users.
A short hint of a few words.

Use something else when

The content has links, buttons or inputs. Use popover.
The information is needed to complete a task. Use field (put it in the description).
Long explanations. Use popover.

No TooltipProvider is needed. The trigger must be focusable, so use asChild with a Button.

Import

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

Example

import { Copy } from "lucide-react"

;<Tooltip>
  <TooltipTrigger asChild>
    <Button size="icon" variant="ghost" aria-label="Copy">
      <Copy />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Copy to clipboard</TooltipContent>
</Tooltip>

Mistakes to avoid

Avoid	Instead
<TooltipProvider> around the app	Nothing. Each Tooltip has its own provider.
title="..." attributes for hints	<Tooltip>
A Tooltip as the only label of an icon button	Give the Button an aria-label as well

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/tooltip.json