Animated Tooltip

1"use client";
2 
3import {
4  AnimatePresence,
5  motion,
6  useMotionValue,
7  useSpring,
8  useTransform,
9} from "framer-motion";
10import * as React from "react";
11 
12export type AnimatedTooltipSide = "top" | "bottom";
13 
14export type AnimatedTooltipProps = Omit<
15  React.HTMLAttributes<HTMLSpanElement>,
16  "content"
17> & {
18  /** Tooltip content shown on hover / focus. */
19  content: React.ReactNode;
20  /** Which side of the trigger the tooltip appears on. */
21  side?: AnimatedTooltipSide;
22  /** The trigger element the tooltip is attached to. */
23  children: React.ReactNode;
24};
25 
26const SPRING = { stiffness: 170, damping: 12, mass: 0.1 } as const;
27 
28const PANEL_BASE =
29  "pointer-events-none absolute left-1/2 z-popover flex max-w-[16rem] -translate-x-1/2 flex-col items-center rounded-lg bg-foreground px-3 py-1.5 text-center text-xs font-medium text-background shadow-lg [transform-style:preserve-3d]";
30 
31const AnimatedTooltip = React.forwardRef<HTMLSpanElement, AnimatedTooltipProps>(
32  ({ content, side = "top", className, children, ...props }, ref) => {
33    const [open, setOpen] = React.useState(false);
34 
35    const x = useMotionValue(0);
36    const rotate = useSpring(useTransform(x, [-60, 60], [-14, 14]), SPRING);
37    const translateX = useSpring(useTransform(x, [-60, 60], [-12, 12]), SPRING);
38 
39    const handleMouseMove = (e: React.MouseEvent<HTMLSpanElement>) => {
40      const rect = e.currentTarget.getBoundingClientRect();
41      x.set(e.clientX - rect.left - rect.width / 2);
42    };
43 
44    const isTop = side === "top";
45 
46    return (
47      // biome-ignore lint/a11y/noStaticElementInteractions: hover/focus only reveals a tooltip; the wrapped child stays the interactive element
48      <span
49        ref={ref}
50        data-slot="animated-tooltip"
51        className={`relative inline-flex ${className ?? ""}`}
52        onMouseEnter={() => setOpen(true)}
53        onMouseLeave={() => setOpen(false)}
54        onFocus={() => setOpen(true)}
55        onBlur={() => setOpen(false)}
56        onMouseMove={handleMouseMove}
57        {...props}
58      >
59        <AnimatePresence mode="wait">
60          {open ? (
61            <motion.span
62              role="tooltip"
63              initial={{
64                opacity: 0,
65                y: isTop ? 8 : -8,
66                scale: 0.85,
67              }}
68              animate={{
69                opacity: 1,
70                y: 0,
71                scale: 1,
72                transition: {
73                  type: "spring",
74                  stiffness: 170,
75// … truncated