{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "description": "A popup that appears when an element is hovered or focused, showing a hint for sighted users.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/arrow-svg"
  ],
  "files": [
    {
      "path": "registry/ui/tooltip.tsx",
      "content": "\"use client\";\n\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\n\nfunction TooltipProvider({\n  delay = 150,\n  ...props\n}: BaseTooltip.Provider.Props) {\n  return (\n    <BaseTooltip.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip<Payload>(props: BaseTooltip.Root.Props<Payload>) {\n  return <BaseTooltip.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger<Payload>({\n  className,\n  ...props\n}: BaseTooltip.Trigger.Props<Payload>) {\n  return (\n    <BaseTooltip.Trigger\n      className={className}\n      data-slot=\"tooltip-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction TooltipPortal({ className, ...props }: BaseTooltip.Portal.Props) {\n  return (\n    <BaseTooltip.Portal\n      className={className}\n      data-slot=\"tooltip-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction TooltipPositioner({\n  className,\n  ...props\n}: BaseTooltip.Positioner.Props) {\n  return (\n    <BaseTooltip.Positioner\n      className={cn(\n        \"outline-none h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)\",\n        className,\n      )}\n      data-slot=\"tooltip-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction TooltipPopup({ className, ...props }: BaseTooltip.Popup.Props) {\n  return (\n    <BaseTooltip.Popup\n      className={cn(\"relative\", className)}\n      data-slot=\"tooltip-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction TooltipArrow({ className, ...props }: BaseTooltip.Arrow.Props) {\n  return (\n    <BaseTooltip.Arrow\n      className={cn(\n        \"flex items-center justify-center\",\n        \"data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0\",\n        \"data-[side=left]:-right-3 data-[side=left]:rotate-90\",\n        \"data-[side=right]:-left-3 data-[side=right]:-rotate-90\",\n        \"data-[side=top]:-bottom-2 data-[side=top]:rotate-180\",\n        className,\n      )}\n      data-slot=\"tooltip-arrow\"\n      style={{\n        width: \"max(20px, calc(var(--radius) * 1.7))\",\n      }}\n      {...props}\n    >\n      <ArrowSvg variant=\"tooltip\" />\n    </BaseTooltip.Arrow>\n  );\n}\n\nfunction TooltipViewport({ className, ...props }: BaseTooltip.Viewport.Props) {\n  return (\n    <BaseTooltip.Viewport\n      className={cn(\"relative size-full\", className)}\n      data-slot=\"tooltip-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 10,\n  side = \"top\",\n  align = \"center\",\n  alignOffset = 0,\n  showArrow = true,\n  children,\n  ...props\n}: BaseTooltip.Popup.Props &\n  Pick<\n    BaseTooltip.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    showArrow?: boolean;\n  }) {\n  return (\n    <TooltipPortal>\n      <BaseTooltip.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        data-slot=\"tooltip-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BaseTooltip.Popup\n          className={cn(\n            \"bg-accent text-accent-foreground w-fit rounded-md px-3 py-1.5 text-xs text-balance\",\n            \"overlay-outline animate-popup duration-0 data-instant:transition-none\",\n            className,\n          )}\n          data-slot=\"tooltip-content\"\n          {...props}\n        >\n          {children}\n          {showArrow && <TooltipArrow />}\n        </BaseTooltip.Popup>\n      </BaseTooltip.Positioner>\n    </TooltipPortal>\n  );\n}\n\nconst createTooltipHandle = BaseTooltip.createHandle;\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipPositioner,\n  TooltipPopup,\n  TooltipArrow,\n  TooltipViewport,\n  createTooltipHandle,\n  // Composite component\n  TooltipContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}