registry:component

Motion Tooltip

v1.0.0ga

Tooltip primitive with motion-driven enter and exit behavior.

Registry Endpoint

npx shadcn@latest add @aavya/ui-motion-tooltip

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-motion-tooltip.json

Live Preview

Props

Part	Prop	Type	Default
AnimatedTooltip	items	TooltipItem[]	—
AnimatedTooltip	className?	string	—

Usage Snippet

import { MotionTooltip } from '@/components/ui/motion-tooltip'

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

Source Preview

'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)}
        >