{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "author": "@fma-ui/ui",
  "description": "A short, non-interactive hint that appears on hover or keyboard focus of its trigger.",
  "dependencies": [
    "cn@^0.4.0",
    "react-aria-components@^1.21.1"
  ],
  "files": [
    {
      "path": "src/core/tooltip/tooltip.tsx",
      "content": "import { cn } from \"cn\";\nimport * as React from \"react\";\nimport {\n  Focusable,\n  OverlayArrow,\n  Tooltip as TooltipPrimitive,\n  TooltipTrigger as TooltipTriggerPrimitive,\n} from \"react-aria-components\";\n\nfunction TooltipTrigger({\n  delay = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipTriggerPrimitive>) {\n  const [trigger, tooltip] = React.Children.toArray(children);\n\n  return (\n    <TooltipTriggerPrimitive data-slot=\"tooltip-trigger\" delay={delay} {...props}>\n      <Focusable>{trigger as React.ComponentProps<typeof Focusable>[\"children\"]}</Focusable>\n      {tooltip}\n    </TooltipTriggerPrimitive>\n  );\n}\n\nfunction Tooltip({\n  className,\n  placement = \"top\",\n  offset = 4,\n  crossOffset = 0,\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof TooltipPrimitive>, \"children\" | \"className\"> & {\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <TooltipPrimitive\n      data-slot=\"tooltip-content\"\n      placement={placement}\n      offset={offset}\n      crossOffset={crossOffset}\n      className={cn(\n        \"z-50 inline-flex w-fit max-w-xs origin-(--trigger-anchor-point) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <OverlayArrow\n        className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\"\n        style={({ placement, defaultStyle }) => ({\n          ...defaultStyle,\n          rotate: \"0deg\",\n          translate: \"0 0\",\n          transform:\n            placement === \"bottom\"\n              ? \"translate(-50%, calc(50% + 2px)) rotate(45deg)\"\n              : placement === \"top\"\n                ? \"translate(-50%, calc(-50% - 2px)) rotate(45deg)\"\n                : placement === \"left\"\n                  ? \"translate(calc(-50% - 2px), -50%) rotate(45deg)\"\n                  : \"translate(calc(50% + 2px), -50%) rotate(45deg)\",\n        })}\n      />\n    </TooltipPrimitive>\n  );\n}\n\nexport { Tooltip, TooltipTrigger };\n",
      "type": "registry:component",
      "target": "components/fma-ui/tooltip.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "shadcn",
    "origin": "shadcn/ui, style: aria-nova (base: react-aria-components). TooltipTrigger wraps [trigger, Tooltip] and opens with no delay by default (delay=0).",
    "tags": [
      "overlay",
      "react-aria"
    ]
  },
  "categories": [
    "overlay"
  ],
  "type": "registry:ui"
}