"use client";
import * as React from "react";
import * as T from "@radix-ui/react-tooltip";
import { AnimatePresence, motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const TooltipCtx = React.createContext(false);

export function TooltipProvider({ delayDuration = 150, ...p }: React.ComponentProps<typeof T.Provider>) {
  return <T.Provider delayDuration={delayDuration} {...p} />;
}

/** Same API as Radix Tooltip. Wraps itself in a provider so it works standalone. */
export function Tooltip({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof T.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <TooltipProvider>
      <TooltipCtx.Provider value={current}>
        <T.Root
          open={current}
          onOpenChange={(v) => {
            setInner(v);
            onOpenChange?.(v);
          }}
          {...p}
        />
      </TooltipCtx.Provider>
    </TooltipProvider>
  );
}
export const TooltipTrigger = T.Trigger;

export function TooltipContent({ className, children, sideOffset = 6, ...p }: React.ComponentProps<typeof T.Content>) {
  const open = React.useContext(TooltipCtx);
  return (
    <AnimatePresence>
      {open && (
        <T.Portal forceMount>
          <T.Content asChild forceMount sideOffset={sideOffset} {...p}>
            <motion.div
              className={cn(
                "z-50 rounded-full bg-surface-inverse px-3 py-1.5 text-xs font-bold text-on-surface-inverse shadow-clay-sm",
                className
              )}
              style={{ transformOrigin: "var(--radix-tooltip-content-transform-origin)" }}
              initial={{ opacity: 0, scale: 0.6, y: 4 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.85, transition: { duration: 0.12 } }}
              transition={springs.bouncy}
            >
              {children}
            </motion.div>
          </T.Content>
        </T.Portal>
      )}
    </AnimatePresence>
  );
}
Installation
