Animated Tooltip

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import type { ReactNode } from "react";
6import { useCallback, useEffect, useId, useRef, useState } from "react";
7 
8export type AnimatedTooltipPlacement = "top" | "bottom" | "left" | "right";
9 
10export interface AnimatedTooltipProps {
11  /** The trigger element the tooltip is anchored to */
12  children: ReactNode;
13  /** Additional CSS class names for the tooltip container */
14  className?: string;
15  /** Content displayed inside the tooltip */
16  content: ReactNode;
17  /** Delay in milliseconds before the tooltip appears */
18  delay?: number;
19  /** Placement of the tooltip relative to the trigger */
20  placement?: AnimatedTooltipPlacement;
21}
22 
23const SPRING = {
24  bounce: 0.1,
25  duration: 0.25,
26  type: "spring" as const,
27};
28 
29const placementStyles: Record<AnimatedTooltipPlacement, string> = {
30  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
31  left: "right-full top-1/2 -translate-y-1/2 mr-2",
32  right: "left-full top-1/2 -translate-y-1/2 ml-2",
33  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
34};
35 
36const arrowStyles: Record<AnimatedTooltipPlacement, string> = {
37  bottom:
38    "bottom-full left-1/2 -translate-x-1/2 border-b-foreground border-x-transparent border-t-transparent",
39  left: "left-full top-1/2 -translate-y-1/2 border-l-foreground border-y-transparent border-r-transparent",
40  right:
41    "right-full top-1/2 -translate-y-1/2 border-r-foreground border-y-transparent border-l-transparent",
42  top: "top-full left-1/2 -translate-x-1/2 border-t-foreground border-x-transparent border-b-transparent",
43};
44 
45const arrowBorderSize: Record<AnimatedTooltipPlacement, string> = {
46  bottom: "border-4",
47  left: "border-4",
48  right: "border-4",
49  top: "border-4",
50};
51 
52const getInitialTransform = (
53  placement: AnimatedTooltipPlacement
54): { opacity: number; scale: number; x: number; y: number } => {
55  const base = { opacity: 0, scale: 0.95, x: 0, y: 0 };
56  switch (placement) {
57    case "top":
58      return { ...base, y: 4 };
59    case "bottom":
60      return { ...base, y: -4 };
61    case "left":
62      return { ...base, x: 4 };
63    case "right":
64      return { ...base, x: -4 };
65  }
66};
67 
68const AnimatedTooltip = ({
69  content,
70  placement = "top",
71  delay = 0,
72  children,
73  className,
74}: AnimatedTooltipProps) => {
75  const shouldReduceMotion = useReducedMotion();
76  const [isVisible, setIsVisible] = useState(false);
77// … truncated