DocsComponentsRecipes
Components

Tooltip

A hover/focus hint. Not a substitute for an accessible name.

Loading...

Installation

npx shadcn@latest add @fujin/tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={
        <Button variant="ghost" size="icon" aria-label="Delete">
          <TrashIcon />
        </Button>
      }
    />
    <TooltipContent>Delete</TooltipContent>
  </Tooltip>
</TooltipProvider>

Pitfalls

  • Never make a tooltip the only source of a control's accessible name - touch users and some screen-reader interactions never trigger hover. Always set aria-label on the trigger too.
  • Wrap a group of tooltips in one TooltipProvider so the shared delay applies - the second tooltip then opens instantly instead of waiting out its own full delay.

API Reference

Prop

Type

Popover

A non-modal panel anchored to a trigger.

Dropdown Menu

An anchored menu of actions, with checkbox items, radio items and submenus.

On this page

InstallationUsagePitfallsAPI Reference