{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "info-tooltip", "title": "Info tooltip", "description": "An (i) icon that springs open an inverted tooltip with an optional title and footer; opens on tap on a phone.", "dependencies": [ "radix-ui", "motion", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "registry/items/info-tooltip/info-tooltip.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { AnimatePresence, motion, useReducedMotionConfig } from \"motion/react\";\nimport { Info } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface InfoTooltipProps {\n /** The body of the tooltip. */\n content?: React.ReactNode;\n /** Optional bold title at the top. */\n title?: React.ReactNode;\n /** Optional footer, under a hairline (a source, a caveat). */\n footer?: React.ReactNode;\n /** Custom trigger. When omitted, an accessible (i) icon button is rendered. */\n children?: React.ReactNode;\n /** Side of the trigger to open on. Defaults to \"top\". */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n /** Alignment against the trigger. Defaults to \"center\". */\n align?: \"start\" | \"center\" | \"end\";\n /** Gap from the trigger in pixels. Defaults to 6. */\n sideOffset?: number;\n /** Extra classes for the tooltip box. */\n contentClassName?: string;\n /** Extra classes for the default (i) trigger. */\n triggerClassName?: string;\n /** Hover delay before opening, in ms. Defaults to 150. */\n delayDuration?: number;\n /** Accessible label for the default trigger. Falls back to the title or content when they are strings. */\n label?: string;\n /** Show a small arrow pointing at the trigger. Defaults to false. */\n showArrow?: boolean;\n}\n\n/**\n * A small explanation behind an (i). An inverted box (`bg-ink` on\n * `text-on-solid`, so it flips with the mode) that springs out of its\n * trigger, with an optional title and footer.\n *\n * On a phone, Radix never opens a tooltip on touch, which would leave the\n * explanation unreachable. The default (i) trigger explains and does nothing\n * else, so a tap opens it; a custom trigger might be a link or a control,\n * where a tap has to keep doing that instead.\n */\nexport function InfoTooltip({\n content,\n title,\n footer,\n children,\n side = \"top\",\n align,\n sideOffset = 6,\n contentClassName,\n triggerClassName,\n delayDuration = 150,\n label,\n showArrow = false,\n}: InfoTooltipProps) {\n const reduceMotion = useReducedMotionConfig();\n const [open, setOpen] = React.useState(false);\n // The box is portalled to , out of any `[data-theme]` scope the\n // trigger sits in. Carry the scope across so the tooltip wears the same\n // design system as the thing it explains.\n const [theme, setTheme] = React.useState();\n const triggerRef = React.useRef(null);\n const touchRef = React.useRef(false);\n const openOnTap = !children;\n\n function changeOpen(next: boolean) {\n if (next) {\n setTheme(\n triggerRef.current?.closest(\"[data-theme]\")?.getAttribute(\"data-theme\") ??\n undefined,\n );\n }\n setOpen(next);\n }\n\n function handlePointerDown(event: React.PointerEvent) {\n touchRef.current = openOnTap && event.pointerType === \"touch\";\n // Radix closes an open tooltip on pointer-down; for a tap that would undo\n // the open the click below is about to make.\n if (touchRef.current) event.preventDefault();\n }\n\n function handleClick(event: React.MouseEvent) {\n if (!touchRef.current) return;\n touchRef.current = false;\n // Radix's own click handler closes the tooltip; a prevented event skips it.\n event.preventDefault();\n changeOpen(true);\n }\n\n if (!content && !title) {\n return <>{children};\n }\n\n const trigger = children ?? (\n \n \n \n );\n\n return (\n \n \n \n {trigger}\n \n\n \n {open && (\n \n \n \n {title && (\n {title}\n )}\n {content && (\n \n {content}\n \n )}\n {footer && (\n \n {footer}\n \n )}\n {showArrow && (\n \n )}\n \n \n \n )}\n \n \n \n );\n}\n", "type": "registry:ui" } ], "meta": { "kind": "primitive", "whenToUse": "Use to explain a label, metric or setting in a sentence or two without cluttering the screen, or wrap any element to give it a hover hint. Do not put actions or anything the reader must see inside it; that belongs in a popover or on the page.", "origin": { "project": "180Connect", "path": "src/components/ui/info-tooltip.tsx" }, "credits": [ { "name": "Animate UI (Radix Tooltip)", "url": "https://animate-ui.com", "license": "MIT" } ] }, "type": "registry:ui" }