Animated Tooltip

1"use client"
2 
3import * as React from "react"
4import { AnimatePresence, motion, useReducedMotion } from "motion/react"
5import { cn } from "@/lib/utils"
6 
7export interface AnimatedTooltipProps {
8  /** Tooltip bubble content. */
9  content: React.ReactNode
10  /** Which side of the trigger the bubble appears on. */
11  side?: "top" | "bottom"
12  /** The trigger — a single focusable element (button, link, or a tabIndex'd
13   * element). The tooltip's id is injected into it via aria-describedby so
14   * screen readers announce the bubble from the element that actually holds
15   * focus (ARIA tooltip pattern), not from the positioning wrapper. */
16  children: React.ReactElement
17  /** Applied to the tooltip bubble, not the trigger wrapper. */
18  className?: string
19}
20 
21export function AnimatedTooltip({ content, side = "top", children, className }: AnimatedTooltipProps) {
22  const [hovered, setHovered] = React.useState(false)
23  const [focused, setFocused] = React.useState(false)
24  const reduced = useReducedMotion()
25  const id = React.useId()
26  const open = hovered || focused
27 
28  const close = () => {
29    setHovered(false)
30    setFocused(false)
31  }
32 
33  // aria-describedby has to land on the element that actually takes focus (the
34  // ARIA tooltip pattern); on the wrapper span a screen reader announces
35  // nothing — hence injecting it via clone
36  const trigger = React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
37    "aria-describedby": open ? id : undefined,
38  })
39 
40  return (
41    <span
42      className="relative inline-flex"
43      onBlur={() => setFocused(false)}
44      onFocus={() => setFocused(true)}
45      onKeyDown={e => {
46        if (e.key === "Escape") close()
47      }}
48      onMouseEnter={() => setHovered(true)}
49      onMouseLeave={() => setHovered(false)}
50    >
51      {trigger}
52      <AnimatePresence>
53        {open && (
54          <motion.span
55            animate={{
56              opacity: 1,
57              y: 0,
58              scale: 1,
59              transition: reduced ? { duration: 0.15 } : { type: "spring", stiffness: 300, damping: 18 },
60            }}
61            className={cn(
62              "pointer-events-none absolute left-1/2 z-50 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2.5 py-1 text-xs text-background shadow-md",
63              side === "top" ? "bottom-full mb-2" : "top-full mt-2",
64              className,
65            )}
66            exit={{ opacity: 0, transition: { duration: 0.15 } }}
67            id={id}
68// … truncated