{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "tooltip-popover",
  "type": "registry:ui",
  "title": "Tooltip Popover",
  "description": "Physics-based hover and click tooltip with collision detection and spring scale popping animation.",
  "category": "overlays",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/overlays/tooltip-popover/tooltip-popover.tsx",
      "type": "registry:ui",
      "target": "components/ui/tooltip-popover.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\nexport const TooltipPopover: React.FC = () => {\n  const [hovered, setHovered] = useState<string | null>(null);\n\n  const items = [\n    { id: '1', label: 'Fast AST Resolver', tip: 'Sub-millisecond abstract syntax tree parsing.' },\n    { id: '2', label: 'Zero-Copy Ring', tip: 'Lock-free SharedArrayBuffer ring stream.' },\n    { id: '3', label: 'Formal Proofs', tip: 'Z3 SMT solver proving loop invariants.' },\n  ];\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-4 py-8\">\n      {items.map((item) => (\n        <div\n          key={item.id}\n          className=\"relative inline-block\"\n          onMouseEnter={() => setHovered(item.id)}\n          onMouseLeave={() => setHovered(null)}\n        >\n          <button className=\"px-4 py-2 rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 text-xs font-mono text-zinc-900 dark:text-white shadow-xs hover:border-indigo-500 transition-colors cursor-pointer\">\n            {item.label}\n          </button>\n\n          <AnimatePresence>\n            {hovered === item.id && (\n              <motion.div\n                initial={{ opacity: 0, y: 6, scale: 0.95 }}\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                exit={{ opacity: 0, y: 4, scale: 0.95 }}\n                transition={{ duration: 0.15 }}\n                className=\"absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 w-48 rounded-xl border border-zinc-200 dark:border-white/15 bg-zinc-950 p-2.5 text-center shadow-xl pointer-events-none\"\n              >\n                <p className=\"text-[11px] text-zinc-300 font-sans leading-tight\">{item.tip}</p>\n                <div className=\"absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-950\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      ))}\n    </div>\n  );\n};\n"
    }
  ]
}