"use client"; import React, { useState, useRef } from "react"; import { motion, useTransform, AnimatePresence, useMotionValue, useSpring, } from "motion/react"; export const AnimatedTooltip = ({ items, }: { items: { id: number; name: string; designation: string; image: string; }[]; }) => { const [hoveredIndex, setHoveredIndex] = useState(null); const springConfig = { stiffness: 100, damping: 15 }; const x = useMotionValue(0); const animationFrameRef = useRef(null); const rotate = useSpring( useTransform(x, [-100, 100], [-45, 45]), springConfig, ); const translateX = useSpring( useTransform(x, [-100, 100], [-50, 50]), springConfig, ); const handleMouseMove = (event: any) => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } animationFrameRef.current = requestAnimationFrame(() => { const halfWidth = event.target.offsetWidth / 2; x.set(event.nativeEvent.offsetX - halfWidth); }); }; return ( <> {items.map((item, idx) => (

setHoveredIndex(item.id)} onMouseLeave={() => setHoveredIndex(null)} > {hoveredIndex === item.id && (

{item.name}

{item.designation}

)}

))} ); };

Animated Tooltip

Instalação

Dependências