xlibs-components/dist/components/aceternity/animated-tooltip.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { motion, useTransform, AnimatePresence, useMotionValue, useSpring, } from "framer-motion";
export const AnimatedTooltip = ({ items, }) => {
    const [hoveredIndex, setHoveredIndex] = useState(null);
    const springConfig = { stiffness: 100, damping: 5 };
    const x = useMotionValue(0); // going to set this value on mouse move
    // rotate the tooltip
    const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), springConfig);
    // translate the tooltip
    const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
    const handleMouseMove = (event) => {
        const halfWidth = event.target.offsetWidth / 2;
        x.set(event.nativeEvent.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
    };
    return (_jsx(_Fragment, { children: items.map((item, idx) => (_jsxs("div", { className: "group relative -mr-4", onMouseEnter: () => setHoveredIndex(item.id), onMouseLeave: () => setHoveredIndex(null), children: [_jsx(AnimatePresence, { mode: "popLayout", children: hoveredIndex === item.id && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, scale: 0.6 }, animate: {
                            opacity: 1,
                            y: 0,
                            scale: 1,
                            transition: {
                                type: "spring",
                                stiffness: 260,
                                damping: 10,
                            },
                        }, exit: { opacity: 0, y: 20, scale: 0.6 }, style: {
                            translateX: translateX,
                            rotate: rotate,
                            whiteSpace: "nowrap",
                        }, 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", children: [_jsx("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" }), _jsx("div", { className: "absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent" }), _jsx("div", { className: "relative z-30 text-base font-bold text-white", children: item.name }), _jsx("div", { className: "text-xs text-white", children: item.designation })] })) }), _jsx("img", { onMouseMove: handleMouseMove, height: 100, width: 100, src: item.image, alt: item.name, className: "relative !m-0 h-14 w-14 rounded-full border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105" })] }, item.name))) }));
};