{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A sticky note that appears on hover.", "categories": [ "core" ], "files": [ { "path": "ui/tooltip.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\n\nconst NOTES = {\n yellow: \"#fff1a1\",\n pink: \"#ffd3dd\",\n blue: \"#d2e9ff\",\n green: \"#d8f4c8\",\n} as const;\n\n// Popups render in a layer on that copies the paper type of the nearest [data-paper]\n// element (and follows it if it changes). That keeps their theme without trapping them inside the\n// container's stacking context, so sticky headers can't cover them.\nfunction usePaperContainer() {\n const anchor = React.useRef(null);\n const [container, setContainer] = React.useState();\n React.useEffect(() => {\n const source = anchor.current?.closest(\"[data-paper]\");\n if (!source || source === document.documentElement) return;\n const layer = document.createElement(\"div\");\n layer.setAttribute(\"data-paper-layer\", \"\");\n const sync = () => layer.setAttribute(\"data-paper\", source.getAttribute(\"data-paper\") ?? \"\");\n sync();\n document.body.appendChild(layer);\n const observer = new MutationObserver(sync);\n observer.observe(source, { attributes: true, attributeFilter: [\"data-paper\"] });\n setContainer(layer);\n return () => {\n observer.disconnect();\n layer.remove();\n };\n }, []);\n return [anchor, container] as const;\n}\n\n/** Wrap your app (or a section) once to share hover delays between tooltips. */\nexport function TooltipProvider({ delayDuration = 200, ...props }: React.ComponentProps) {\n return ;\n}\n\n/** A sticky note that appears on hover. Includes its own provider, so it works standalone. */\nexport function Tooltip(props: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport function TooltipContent({\n className = \"\",\n style,\n sideOffset = 8,\n note = \"yellow\",\n children,\n ...props\n}: React.ComponentProps & { note?: keyof typeof NOTES }) {\n const [anchor, container] = usePaperContainer();\n return (\n <>\n