Tooltip

The Tooltip primitive wraps Radix Tooltip — a floating label anchored to a trigger, shown on hover or keyboard focus. Wrap a region in TooltipProvider (it sets a shared delayDuration), then compose Tooltip → TooltipTrigger (usually asChild around a button) → TooltipContent. The sidebar shell uses it to label icons when the rail is collapsed.

Preview

import { Button } from '@web/components/ui/button';import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from '@web/components/ui/tooltip';export default function TooltipDemo() {  return (    <TooltipProvider>      <Tooltip>        <TooltipTrigger asChild>          <Button variant="outline">Hover me</Button>        </TooltipTrigger>        <TooltipContent>Add to library</TooltipContent>      </Tooltip>    </TooltipProvider>  );}

Import

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

Props

Each part forwards every prop of its underlying Radix element: TooltipProvider (with a delayDuration default of 0), Tooltip (Root), TooltipTrigger, and TooltipContent (with a sideOffset default of 0, plus side/align to position it). All accept className.