Tooltip

Composition preview

Try Tooltip alongside its related overlays & menus components. These examples keep all actions local.

Usage

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

<>
<TooltipProvider><Tooltip>
  <TooltipTrigger asChild><Button variant="outline">Search</Button></TooltipTrigger>
  <TooltipContent>Search your workspace</TooltipContent>
</Tooltip></TooltipProvider>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

TooltipProvider delayDuration; TooltipTrigger asChild; TooltipContent side, sideOffset

Usage & accessibility

FastTooltip retains zero-delay product hints and delayed shortcut hints. TooltipSurface supports host-positioned chart and shortcut hints. Essential help belongs in visible text.

Implementation contract

src/components/ui/tooltip.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.