{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A Radix tooltip with an arrow, side offset and fade and zoom transitions that opens on hover and keyboard focus. Works standalone or under a shared provider.",
  "dependencies": [
    "radix-ui"
  ],
  "devDependencies": [
    "tw-animate-css"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/tooltip.tsx",
      "content": "// Ballmac UI: Tooltip. https://ui.ballmac.com/components/tooltip\n// Based on shadcn/ui's Tooltip (MIT, Copyright (c) 2023 shadcn), restyled with an arrow and tw-animate-css transitions.\n\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider> & {\n  /** Milliseconds from pointer enter until the tooltip opens. */\n  delayDuration?: number\n}\n\nfunction TooltipProvider({ delayDuration = 200, ...props }: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />\n}\n\n/** A tooltip. Wraps itself in a TooltipProvider, so it works standalone; add one provider higher up to share delays. */\nfunction Tooltip(props: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger(props: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Content> & {\n  /** Show the pointer arrow. */\n  arrow?: boolean\n  /** Distance in px between the trigger and the tooltip. */\n  sideOffset?: number\n}\n\nfunction TooltipContent({ className, sideOffset = 6, arrow = true, children, ...props }: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-fit max-w-[min(20rem,calc(100vw-2rem))] origin-(--radix-tooltip-content-transform-origin) items-center gap-2 text-balance rounded-md bg-foreground px-2.5 py-1.5 text-xs leading-snug text-background shadow-[0_4px_12px_-2px_rgb(0_0_0/0.2)]\",\n          \"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:animate-none\",\n          \"data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {arrow ? (\n          <TooltipPrimitive.Arrow\n            data-slot=\"tooltip-arrow\"\n            width={10}\n            height={5}\n            className=\"fill-foreground\"\n          />\n        ) : null}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TooltipContentProps, type TooltipProviderProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/tooltip.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "tooltip",
      "hint",
      "popover",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "Short text hint for a control, shown on hover and focus. Compose Tooltip > TooltipTrigger (style it with buttonVariants and give icon triggers an aria-label) + TooltipContent. Put Kbd inside the content for shortcut hints.",
      "whenToUse": [
        "Naming icon-only buttons (still give the button an aria-label)",
        "Shortcut hints next to a label",
        "Clarifying truncated text"
      ],
      "whenNotToUse": [
        "Essential information or anything interactive (use a popover)",
        "Touch-first UIs where hover doesn't exist",
        "Error messages (show them inline)"
      ],
      "composesWith": [
        "button",
        "kbd",
        "avatar"
      ],
      "a11y": [
        {
          "keys": "Tab (focus trigger)",
          "action": "Opens the tooltip"
        },
        {
          "keys": "Escape",
          "action": "Closes the tooltip"
        }
      ],
      "customization": [
        "TooltipProvider delayDuration (default 200 ms) and skipDelayDuration",
        "TooltipContent side, align, sideOffset (default 6) and arrow (default true)",
        "Needs the tw-animate-css classes for the open and close animation"
      ]
    },
    "source": {
      "name": "shadcn/ui Tooltip",
      "url": "https://github.com/shadcn-ui/ui",
      "license": "MIT",
      "copyright": "Copyright (c) 2023 shadcn",
      "modified": true
    },
    "examples": [
      "tooltip-demo"
    ],
    "url": "https://ui.ballmac.com/components/tooltip"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}