{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "type": "registry:ui",
  "title": "Tooltip",
  "description": "Hover/focus hint label anchored to any element, with configurable delay and side positioning.",
  "dependencies": [
    "@radix-ui/react-tooltip",
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/tooltip.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Tooltip — animated contextual hint with spring entrance, arrow support, and configurable delay.\n * @module packages/ui/components/ui/tooltip\n * @layer core\n *\n * @component\n * @example\n * import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@saasflare/ui';\n * <TooltipProvider>\n *   <Tooltip>\n *     <TooltipTrigger>Hover me</TooltipTrigger>\n *     <TooltipContent>Helpful hint</TooltipContent>\n *   </Tooltip>\n * </TooltipProvider>\n */\n\nimport * as React from \"react\"\nimport { m } from \"motion/react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion, springBouncy } from \"@saasflare/ui\"\n\n/**\n * Context provider that shares open-delay and skip-delay behavior across all\n * descendant tooltips. Wrap once near the app root; defaults `delayDuration`\n * to 0 so tooltips appear instantly.\n *\n * @component\n * @layer core\n */\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\n/**\n * Contextual hint shown when an element is hovered or keyboard-focused.\n * Root of the composition — owns open state and wires {@link TooltipTrigger}\n * and {@link TooltipContent} together. Must be rendered inside a\n * {@link TooltipProvider}.\n *\n * @component\n * @layer core\n */\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\n/**\n * Element that shows the tooltip on hover or keyboard focus.\n *\n * @component\n * @layer core\n */\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\n/**\n * Props for {@link TooltipContent}. Extends the Radix Tooltip content props\n * with the Saasflare theming axes (`surface`, `radius`, `animated`,\n * `iconWeight`).\n */\ninterface TooltipContentProps\n  extends Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {}\n\n/**\n * The tooltip bubble itself. Portals to the body, enters with a spring\n * scale/fade, and resolves `surface`/`radius`/`animated` against the\n * <SaasflareProvider> context.\n *\n * @component\n * @layer core\n */\nfunction TooltipContent({\n  className,\n  sideOffset = 6,\n  children,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: TooltipContentProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, springBouncy)\n\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        {...props}\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        asChild\n      >\n        <m.div\n          data-surface={sf.surface}\n          data-radius={sf.radius}\n          data-animated={String(sf.animated)}\n          initial={motion.disabled ? false : { opacity: 0, scale: 0.92, y: 2 }}\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          exit={motion.disabled ? undefined : { opacity: 0, scale: 0.92 }}\n          transition={motion.transition}\n          className={cn(\n            \"z-50 w-fit rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md\",\n            className\n          )}\n        >\n          {children}\n        </m.div>\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\n/** Props for {@link TooltipArrow}. Pure pass-through to the Radix Tooltip arrow. */\ninterface TooltipArrowProps\n  extends React.ComponentProps<typeof TooltipPrimitive.Arrow> {}\n\n/**\n * Arrow connecting the tooltip to its trigger.\n *\n * Renders as a child of `<TooltipContent>` (consumes Popper context) and rides\n * the existing spring entrance because it lives inside the animated panel — no\n * extra motion wiring is needed, and reduced-motion / `animated=false` gating is\n * inherited from the content. Fill follows the `bg-primary` token via\n * `fill-primary` to match the tooltip body, so it stays palette- and\n * theme-reactive. Override the fill with `className` under custom surfaces.\n *\n * @component\n * @layer core\n * @example\n * <TooltipContent>\n *   Copy link\n *   <TooltipArrow />\n * </TooltipContent>\n */\nfunction TooltipArrow({ className, ...props }: TooltipArrowProps) {\n  return (\n    <TooltipPrimitive.Arrow\n      data-slot=\"tooltip-arrow\"\n      width={11}\n      height={5}\n      className={cn(\"fill-primary\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow, type TooltipContentProps, type TooltipArrowProps }\n",
      "target": "components/ui/tooltip.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/tooltip.json"
  }
}