{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "description": "The generic hover/focus tooltip — a small bubble of content anchored to a trigger.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/tooltip.tsx",
      "content": "\"use client\";\n\nimport { type ReactNode, useId, useState } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n  /** The trigger element. */\n  children: ReactNode;\n  /** Tooltip content (text or rich nodes). */\n  content: ReactNode;\n  placement?: TooltipPlacement;\n  /** Class for the wrapper. */\n  className?: string;\n  /** Class for the tooltip bubble. */\n  contentClassName?: string;\n}\n\nconst PLACEMENT: Record<TooltipPlacement, string> = {\n  top: \"bottom-full left-1/2 mb-1.5 -translate-x-1/2\",\n  bottom: \"top-full left-1/2 mt-1.5 -translate-x-1/2\",\n  left: \"right-full top-1/2 mr-1.5 -translate-y-1/2\",\n  right: \"left-full top-1/2 ml-1.5 -translate-y-1/2\",\n};\n\n/**\n * The generic hover/focus tooltip — a small bubble of content anchored to a\n * trigger. Shows on pointer-enter and keyboard focus; flat FUI surface, no drop\n * shadow. For the larger \"hover gear to inspect\" flyout use {@link ItemHoverCard}.\n */\nexport function Tooltip({\n  children,\n  content,\n  placement = \"top\",\n  className,\n  contentClassName,\n}: TooltipProps) {\n  const [open, setOpen] = useState(false);\n  const id = useId();\n  return (\n    // biome-ignore lint/a11y/noStaticElementInteractions: passive wrapper that relays hover/focus to reveal the tooltip; the interactive element is the trigger child\n    <span\n      className={cn(\"relative inline-flex\", className)}\n      onPointerEnter={() => setOpen(true)}\n      onPointerLeave={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onBlur={() => setOpen(false)}\n      aria-describedby={open ? id : undefined}\n    >\n      {children}\n      {open ? (\n        <span\n          role=\"tooltip\"\n          id={id}\n          className={cn(\n            \"pointer-events-none absolute z-50 w-max max-w-xs border border-engram-border-strong bg-engram-raised-2 px-2 py-1 text-[11px] text-engram-fg leading-snug\",\n            PLACEMENT[placement],\n            contentClassName,\n          )}\n        >\n          {content}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/tooltip.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "interaction"
  ],
  "type": "registry:component"
}