{"slug":"tooltip","name":"Tooltip","description":"Hover or focus tooltip with blur enter/exit and spring spawn.","category":"motion","source_url":"https://beui.saura3h.xyz/r/tooltip/raw","detail_url":"https://beui.saura3h.xyz/r/tooltip","raw_url":"https://beui.saura3h.xyz/r/tooltip/raw","page_url":"https://beui.saura3h.xyz/components/motion/tooltip","dependencies":["lucide-react","motion","react"],"internal":["@/components/motion/tooltip","@/lib/utils"],"files":[{"path":"components/motion/tooltip.tsx","type":"component","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion, type Variants } from \"motion/react\";\nimport {\n  cloneElement,\n  isValidElement,\n  useId,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype Side = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport interface TooltipProps {\n  content: ReactNode;\n  children: ReactElement;\n  side?: Side;\n  /** Delay before showing (ms). Default 120. */\n  delay?: number;\n  className?: string;\n  /** Classes for the outer wrapper span. Use to fix baseline / fill parent. */\n  wrapperClassName?: string;\n}\n\nconst wrapperClasses: Record<Side, string> = {\n  top: \"bottom-full left-1/2 mb-2 -translate-x-1/2\",\n  bottom: \"top-full left-1/2 mt-2 -translate-x-1/2\",\n  left: \"right-full top-1/2 mr-2 -translate-y-1/2\",\n  right: \"left-full top-1/2 ml-2 -translate-y-1/2\",\n};\n\nconst transformOrigin: Record<Side, string> = {\n  top: \"center bottom\",\n  bottom: \"center top\",\n  left: \"right center\",\n  right: \"left center\",\n};\n\n// Offset is in the direction *away* from the trigger — content originates near\n// the trigger and rises into resting position.\nconst offsetFrom: Record<Side, { x?: number; y?: number }> = {\n  top: { y: 10 },\n  bottom: { y: -10 },\n  left: { x: 10 },\n  right: { x: -10 },\n};\n\nfunction buildVariants(side: Side): Variants {\n  const o = offsetFrom[side];\n  return {\n    initial: {\n      opacity: 0,\n      scale: 0.85,\n      filter: \"blur(10px)\",\n      x: o.x ?? 0,\n      y: o.y ?? 0,\n    },\n    animate: {\n      opacity: 1,\n      scale: 1,\n      filter: \"blur(0px)\",\n      x: 0,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 380,\n        damping: 30,\n        mass: 0.7,\n        opacity: { duration: 0.22, ease: [0.16, 1, 0.3, 1] },\n        filter: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },\n      },\n    },\n    exit: {\n      opacity: 0,\n      scale: 0.92,\n      filter: \"blur(6px)\",\n      x: (o.x ?? 0) * 0.6,\n      y: (o.y ?? 0) * 0.6,\n      transition: { duration: 0.14, ease: [0.16, 1, 0.3, 1] },\n    },\n  };\n}\n\nconst REDUCED_VARIANTS: Variants = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1, transition: { duration: 0.14, ease: [0.16, 1, 0.3, 1] } },\n  exit: { opacity: 0, transition: { duration: 0.1, ease: [0.16, 1, 0.3, 1] } },\n};\n\nexport function Tooltip({ content, children, side = \"top\", delay = 120, className, wrapperClassName }: TooltipProps) {\n  const [open, setOpen] = useState(false);\n  const id = useId();\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const reduce = useReducedMotion();\n\n  const show = () => {\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setOpen(true), delay);\n  };\n  const hide = () => {\n    if (timer.current) {\n      clearTimeout(timer.current);\n      timer.current = null;\n    }\n    setOpen(false);\n  };\n\n  if (!isValidElement(children)) return children;\n\n  const trigger = cloneElement(children as ReactElement<Record<string, unknown>>, {\n    onMouseEnter: show,\n    onMouseLeave: hide,\n    onFocus: show,\n    onBlur: hide,\n    \"aria-describedby\": id,\n  });\n\n  const variants = reduce ? REDUCED_VARIANTS : buildVariants(side);\n\n  return (\n    <span className={cn(\"relative inline-flex align-middle\", wrapperClassName)}>\n      {trigger}\n      <AnimatePresence mode=\"wait\">\n        {open ? (\n          <span className={cn(\"pointer-events-none absolute z-50\", wrapperClasses[side])}>\n            <motion.span\n              id={id}\n              role=\"tooltip\"\n              variants={variants}\n              initial=\"initial\"\n              animate=\"animate\"\n              exit=\"exit\"\n              style={{\n                transformOrigin: transformOrigin[side],\n                willChange: \"transform, opacity, filter\",\n              }}\n              className={cn(\n                \"block whitespace-nowrap rounded-lg px-2.5 py-1 text-xs font-medium text-(--color-fg) glass\",\n                className,\n              )}\n            >\n              {content}\n            </motion.span>\n          </span>\n        ) : null}\n      </AnimatePresence>\n    </span>\n  );\n}\n"},{"path":"components/previews/motion/tooltip.preview.tsx","type":"preview","content":"\"use client\";\n\nimport { Heart, Settings, Share, Trash2 } from \"lucide-react\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\n\nexport function TooltipPreview() {\n  return (\n    <div className=\"flex flex-col items-center gap-12\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Tooltip content=\"Like this post\" side=\"top\">\n          <button className=\"inline-flex h-10 w-10 items-center justify-center rounded-full border border-(--color-border) bg-(--color-bg-elev) text-(--color-fg) press\">\n            <Heart className=\"h-4 w-4\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Share\" side=\"bottom\">\n          <button className=\"inline-flex h-10 w-10 items-center justify-center rounded-full border border-(--color-border) bg-(--color-bg-elev) text-(--color-fg) press\">\n            <Share className=\"h-4 w-4\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Open settings\" side=\"left\">\n          <button className=\"inline-flex h-10 w-10 items-center justify-center rounded-full border border-(--color-border) bg-(--color-bg-elev) text-(--color-fg) press\">\n            <Settings className=\"h-4 w-4\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Move to trash\" side=\"right\">\n          <button className=\"inline-flex h-10 w-10 items-center justify-center rounded-full border border-(--color-border) bg-(--color-bg-elev) text-(--color-fg) press\">\n            <Trash2 className=\"h-4 w-4\" />\n          </button>\n        </Tooltip>\n      </div>\n      <p className=\"text-xs text-(--color-fg-muted)\">Hover or focus each button. Content fades and un-blurs in.</p>\n    </div>\n  );\n}\n"},{"path":"lib/utils.ts","type":"util","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}