animated-tooltip

1"use client";
2import { AnimatePresence, motion } from "motion/react";
3import type React from "react";
4import { useCallback, useEffect, useRef, useState } from "react";
5import { cn } from "@/lib/utils";
6 
7type Placement =
8  | "top"
9  | "bottom"
10  | "left"
11  | "right"
12  | "top-start"
13  | "top-end"
14  | "bottom-start"
15  | "bottom-end";
16type Animation = "fade" | "scale" | "slide" | "spring";
17 
18// Animated Tooltip
19interface AnimatedTooltipProps {
20  children: React.ReactNode;
21  content: React.ReactNode;
22  placement?: Placement;
23  animation?: Animation;
24  delay?: number;
25  duration?: number;
26  className?: string;
27  contentClassName?: string;
28  arrow?: boolean;
29  offset?: number;
30  disabled?: boolean;
31}
32 
33export function AnimatedTooltip({
34  children,
35  content,
36  placement = "top",
37  animation = "fade",
38  delay = 0,
39  duration = 0.15,
40  className,
41  contentClassName,
42  arrow = true,
43  offset = 8,
44  disabled = false,
45}: AnimatedTooltipProps) {
46  const [isVisible, setIsVisible] = useState(false);
47  const [position, setPosition] = useState({ x: 0, y: 0 });
48  const triggerRef = useRef<HTMLButtonElement>(null);
49  const tooltipRef = useRef<HTMLDivElement>(null);
50  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
51 
52  const calculatePosition = useCallback(() => {
53    if (!triggerRef.current || !tooltipRef.current) return;
54 
55    const triggerRect = triggerRef.current.getBoundingClientRect();
56    const tooltipRect = tooltipRef.current.getBoundingClientRect();
57 
58    let x = 0;
59    let y = 0;
60 
61    switch (placement) {
62      case "top":
63        x = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
64        y = triggerRect.top - tooltipRect.height - offset;
65        break;
66      case "top-start":
67        x = triggerRect.left;
68        y = triggerRect.top - tooltipRect.height - offset;
69        break;
70      case "top-end":
71        x = triggerRect.right - tooltipRect.width;
72        y = triggerRect.top - tooltipRect.height - offset;
73        break;
74      case "bottom":
75        x = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
76        y = triggerRect.bottom + offset;
77        break;
78      case "bottom-start":
79        x = triggerRect.left;
80        y = triggerRect.bottom + offset;
81        break;
82      case "bottom-end":
83        x = triggerRect.right - tooltipRect.width;
84        y = triggerRect.bottom + offset;
85        break;
86      case "left":
87        x = triggerRect.left - tooltipRect.width - offset;
88// … truncated