{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "author": "Matthew Blode",
  "description": "A popup that displays helpful information when hovering or focusing an element.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/tooltip.tsx",
      "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst TooltipProvider = ({\n  delayDuration,\n  delay = delayDuration ?? 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider> & {\n  delayDuration?: number;\n}) => <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props} />;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = ({\n  asChild = false,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger> & {\n  asChild?: boolean;\n}) => {\n  const render =\n    asChild && React.isValidElement(children) ? (children as React.ReactElement) : undefined;\n\n  return (\n    <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" render={render} {...props}>\n      {asChild ? null : children}\n    </TooltipPrimitive.Trigger>\n  );\n};\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    React.ComponentProps<typeof TooltipPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    asChild?: boolean;\n  };\n\nconst TooltipContent = ({\n  asChild = false,\n  className,\n  side = \"top\",\n  sideOffset = 8,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipContentProps) => {\n  const render =\n    asChild && React.isValidElement(children) ? (children as React.ReactElement) : undefined;\n\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-110\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          className={cn(\n            \"fade-in-0 zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-110 origin-(--transform-origin) animate-in rounded-xl bg-primary px-3 py-2 font-normal font-sans text-primary-foreground text-sm shadow-soft ring-1 ring-border data-closed:animate-out motion-reduce:animate-none\",\n            className,\n          )}\n          data-slot=\"tooltip-content\"\n          render={render}\n          {...props}\n        >\n          {asChild ? null : children}\n          {/* The clip-path half-square comes from creator-frontend, with the tip radius taken\n              from 3px to 5px because 3px on a 10px arrow still reads as a point at 1x. Radix\n              rotates its arrow per side; Base UI never does, so the per-side rotation has to\n              be spelled out here or the tip only points the right way on side=\"top\". */}\n          <TooltipPrimitive.Arrow className=\"pointer-events-none absolute size-2.5 rounded-bl-[5px] border border-border bg-primary [clip-path:polygon(0_100%,0_0,100%_100%)] data-[side=bottom]:top-0 data-[side=left]:right-0 data-[side=top]:bottom-0 data-[side=right]:left-0 data-[side=left]:translate-x-1/2 data-[side=right]:-translate-x-1/2 data-[side=bottom]:-translate-y-1/2 data-[side=top]:translate-y-1/2 data-[side=bottom]:rotate-135 data-[side=left]:-rotate-135 data-[side=right]:rotate-45 data-[side=top]:-rotate-45\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n};\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
  "type": "registry:ui"
}