Animated Tooltip

1"use client";
2 
3import React, { useState, useRef } from "react";
4import {
5  motion,
6  useTransform,
7  AnimatePresence,
8  useMotionValue,
9  useSpring,
10} from "motion/react";
11 
12export const AnimatedTooltip = ({
13  items,
14}: {
15  items: {
16    id: number;
17    name: string;
18    designation: string;
19    image: string;
20  }[];
21}) => {
22  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
23  const springConfig = { stiffness: 100, damping: 15 };
24  const x = useMotionValue(0);
25  const animationFrameRef = useRef<number | null>(null);
26 
27  const rotate = useSpring(
28    useTransform(x, [-100, 100], [-45, 45]),
29    springConfig,
30  );
31  const translateX = useSpring(
32    useTransform(x, [-100, 100], [-50, 50]),
33    springConfig,
34  );
35 
36  const handleMouseMove = (event: any) => {
37    if (animationFrameRef.current) {
38      cancelAnimationFrame(animationFrameRef.current);
39    }
40 
41    animationFrameRef.current = requestAnimationFrame(() => {
42      const halfWidth = event.target.offsetWidth / 2;
43      x.set(event.nativeEvent.offsetX - halfWidth);
44    });
45  };
46 
47  return (
48    <>
49      {items.map((item, idx) => (
50        <div
51          className="group relative -mr-4"
52          key={item.name}
53          onMouseEnter={() => setHoveredIndex(item.id)}
54          onMouseLeave={() => setHoveredIndex(null)}
55        >
56          <AnimatePresence>
57            {hoveredIndex === item.id && (
58              <motion.div
59                initial={{ opacity: 0, y: 20, scale: 0.6 }}
60                animate={{
61                  opacity: 1,
62                  y: 0,
63                  scale: 1,
64                  transition: {
65                    type: "spring",
66                    stiffness: 260,
67                    damping: 10,
68                  },
69                }}
70                exit={{ opacity: 0, y: 20, scale: 0.6 }}
71                style={{
72                  translateX: translateX,
73                  rotate: rotate,
74                  whiteSpace: "nowrap",
75                }}
76                className="absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs shadow-xl"
77              >
78                <div className="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent" />
79                <div className="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
80// … truncated