{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tooltip","type":"registry:ui","title":"Tooltip","description":"A short hint that appears on hover or focus, never the only way to learn something.","dependencies":["@radix-ui/react-tooltip","clsx","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"},{"path":"ui/tooltip.tsx","type":"registry:ui","target":"components/ui/tooltip.tsx","content":"\"use client\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./tooltip.css\";\n\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * The first tooltip waits 300ms; neighbours then show at once for 500ms.\n * Tooltips are labels, not panels, so their content is not hoverable: moving\n * along a toolbar switches straight to the next label.\n */\nexport function TooltipProvider({\n  delayDuration = 300,\n  skipDelayDuration = 500,\n  disableHoverableContent = true,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={delayDuration}\n      skipDelayDuration={skipDelayDuration}\n      disableHoverableContent={disableHoverableContent}\n      {...props}\n    />\n  );\n}\n\nexport function TooltipContent({\n  className,\n  sideOffset = 6,\n  shortcut,\n  children,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Content> & {\n  /** Keyboard shortcut shown after the label, e.g. \"⌘D\". */\n  shortcut?: string;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex max-w-60 items-center gap-2 rounded-control bg-foreground px-2.5 py-1.5 text-xs leading-4 font-medium text-background shadow-feedback\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {shortcut && <kbd data-slot=\"tooltip-shortcut\">{shortcut}</kbd>}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n"},{"path":"ui/tooltip.css","type":"registry:file","target":"components/ui/tooltip.css","content":"/* tooltip.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  /* The first tooltip fades in; while warm, neighbours swap with no animation. */\n  [data-slot=\"tooltip-content\"][data-state=\"delayed-open\"] {\n    animation: caliper-fade-in var(--duration-fast) var(--ease-out);\n  }\n  [data-slot=\"tooltip-shortcut\"] {\n    display: inline-flex;\n    align-items: center;\n    height: 18px;\n    padding: 0 5px;\n    border-radius: 4px;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--background) 16%, transparent);\n  }\n\n  [data-slot=\"tooltip-content\"][data-state=\"closed\"] {\n    animation: caliper-fade-out var(--duration-fast) var(--ease-in) forwards;\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"tooltip-content\"] {\n      animation: none;\n    }\n    /* Preserve the exit name for Radix Presence's completion matcher, including\n       a preference changed during exit. No visual motion or unmount timer. */\n    [data-slot=\"tooltip-content\"][data-state=\"closed\"] {\n      animation: caliper-fade-out var(--duration-instant) var(--ease-in) forwards !important;\n    }\n  }\n}\n"}],"categories":["overlays"],"meta":{"tier":"free","license":"MIT","family":"overlays-and-tabs","docs":"/docs/components/tooltip"}}