"use client"; import React, { useState } from "react"; import { motion, useTransform, useMotionValue, useSpring, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; export type AvatarItem = { readonly id: string | number; readonly name: string; readonly designation?: string; readonly icon: React.ElementType; }; const AvatarTooltipItem = ({ item }: { item: AvatarItem }) => { const x = useMotionValue(0); const [isHovered, setIsHovered] = useState(false); const Icon = item.icon; const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), { stiffness: 100, damping: 15, }); const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), { stiffness: 100, damping: 15, }); return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onMouseMove={(e) => { const rect = e.currentTarget.getBoundingClientRect(); x.set(e.clientX - rect.left - rect.width / 2); }} > {isHovered && (

{item.name}

{item.designation && (

{item.designation}

)} )}

); }; export function AvatarTooltips({ items, className }: { items: readonly AvatarItem[], className?: string }) { return (

{items.map((item) => ( ))}

); }

Prop	Type	Default	Required	Description
items	`AvatarItem[]`	`[]`		Array of items containing id, name, designation and a React icon component.
className	`string`	`undefined`		Additional CSS classes for the container element.

Avatar Tooltips

Preview

Installation

Usage

Props

Dependencies

Become a Sponsor