{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "type": "registry:ui",
  "title": "Tooltip",
  "description": "A short text hint shown on hover and keyboard focus. Includes its own provider.",
  "dependencies": [
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/tooltip.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: tooltip. Managed by BlankUI. Read tooltip.md before editing. No provider needed.\nimport type { ComponentProps } from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A short text hint shown on hover and focus. Includes its own provider, so no TooltipProvider is needed.\n *\n * @example\n * <Tooltip>\n *   <TooltipTrigger asChild>\n *     <Button size=\"icon\" variant=\"ghost\" aria-label=\"Copy link\"><Link /></Button>\n *   </TooltipTrigger>\n *   <TooltipContent>Copy link</TooltipContent>\n * </Tooltip>\n */\nexport function Tooltip({\n  delayDuration = 300,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Root> & { delayDuration?: number }) {\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipPrimitive.Provider>\n  )\n}\n\n/** The element that shows the tooltip. Use `asChild` with a focusable element like a Button. */\nexport function TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\n/** The hint text. Keep it to a few words. */\nexport function TooltipContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 max-w-xs rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md motion-safe:animate-fade-in\",\n          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  )\n}\n"
    },
    {
      "path": "ui/tooltip.md",
      "type": "registry:ui",
      "content": "---\nname: tooltip\ntitle: Tooltip\ndescription: A short text hint shown on hover and keyboard focus. Includes its own provider.\ncategory: overlay\nwhenToUse:\n  - Naming an icon-only button for sighted users.\n  - A short hint of a few words.\nwhenNotToUse:\n  - when: The content has links, buttons or inputs.\n    use: popover\n  - when: The information is needed to complete a task.\n    use: field (put it in the description)\n  - when: Long explanations.\n    use: popover\nrelated: [popover, button]\nrequiredParts: [Tooltip, TooltipTrigger, TooltipContent]\nantiPatterns:\n  - avoid: \"<TooltipProvider> around the app\"\n    instead: \"Nothing. Each Tooltip has its own provider.\"\n  - avoid: 'title=\"...\" attributes for hints'\n    instead: \"<Tooltip>\"\n  - avoid: \"A Tooltip as the only label of an icon button\"\n    instead: \"Give the Button an aria-label as well\"\n---\n\n# Tooltip\n\nNo `TooltipProvider` is needed. The trigger must be focusable, so use `asChild` with a Button.\n\n## Import\n\n```tsx\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\"\n```\n\n## Example\n\n```tsx\nimport { Copy } from \"lucide-react\"\n\n;<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" variant=\"ghost\" aria-label=\"Copy\">\n      <Copy />\n    </Button>\n  </TooltipTrigger>\n  <TooltipContent>Copy to clipboard</TooltipContent>\n</Tooltip>\n```\n"
    }
  ],
  "docs": "Read components/ui/tooltip.md before using Tooltip. Docs: https://blank.vageshwar.dev/docs/tooltip",
  "meta": {
    "category": "overlay",
    "requiredParts": [
      "Tooltip",
      "TooltipTrigger",
      "TooltipContent"
    ],
    "related": [
      "popover",
      "button"
    ]
  }
}