Motion Tooltip

import MotionTooltip from '@/components/ui/motion-tooltip.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <MotionTooltip />
    </div>
  )
}

'use client'

import * as React from 'react'

import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from 'motion/react'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

import { cn } from '@/lib/utils'

interface TooltipItem {
  image: string
  name: string
  fallback: string
  designation: string
}

function AnimatedTooltip({ items, className }: { items: TooltipItem[]; className?: string }) {
  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null)
  const springConfig = { stiffness: 100, damping: 5 }

  // going to set this value on mouse move
  const x = useMotionValue(0)

  // 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: React.MouseEvent<HTMLElement>) => {
    const halfWidth = event.currentTarget.offsetWidth / 2

    // set the x value, which is then used in transform and rotate
    x.set(event.nativeEvent.offsetX - halfWidth)
  }

  return (
    <>
      {items.map((item, index) => (
        <div
          className={cn('relative -me-2.5', className)}
          key={item.name}
          onMouseEnter={() => setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(null)}
        >