Floating Tooltip

1"use client";
2 
3import { createContext, useContext, useEffect, useState } from "react";
4import { createPortal } from "react-dom";
5import {
6  AnimatePresence,
7  motion,
8  useMotionValue,
9  useSpring,
10  useVelocity,
11  useTransform,
12} from "motion/react";
13import { cva, type VariantProps } from "class-variance-authority";
14 
15import { cn } from "@/lib/utils";
16 
17const floatingTooltipVariants = cva("ml-4 mt-4 font-medium", {
18  variants: {
19    variant: {
20      default: "bg-primary text-background dark:bg-white",
21      outline: "border border-border bg-background text-foreground shadow-none",
22    },
23    size: {
24      md: "rounded-md px-3.5 py-2.5 text-sm",
25      lg: "rounded-lg px-5 py-4 text-base",
26    },
27  },
28  defaultVariants: {
29    variant: "default",
30    size: "md",
31  },
32});
33 
34interface TooltipContextType {
35  setContent: (
36    content: string,
37    description?: string,
38    contentClassName?: string,
39    descriptionClassName?: string,
40  ) => void;
41  setIsActive: (active: boolean) => void;
42}
43 
44const TooltipContext = createContext<TooltipContextType | null>(null);
45 
46export function FloatingTooltipProvider({
47  children,
48  className,
49  variant,
50  size,
51}: {
52  children: React.ReactNode;
53  className?: string;
54} & VariantProps<typeof floatingTooltipVariants>) {
55  const x = useMotionValue(0);
56  const y = useMotionValue(0);
57 
58  const springConfig = { damping: 45, stiffness: 750 };
59  const smoothX = useSpring(x, springConfig);
60  const smoothY = useSpring(y, springConfig);
61 
62  const velocityX = useVelocity(smoothX);
63  const velocityY = useVelocity(smoothY);
64 
65  const scaleX = useTransform(velocityX, [-1000, 0, 1000], [0.9, 1, 1.15]);
66  const scaleY = useTransform(velocityY, [-1000, 0, 1000], [1.15, 1, 0.9]);
67 
68  const skewX = useTransform(velocityX, [-1000, 0, 1000], [-3, 0, 3]);
69  const skewY = useTransform(velocityY, [-1000, 0, 1000], [-3, 0, 3]);
70 
71  const [isActive, setIsActive] = useState(false);
72  const [content, setContent] = useState("");
73  const [description, setDescription] = useState("");
74  const [contentClassName, setContentClassName] = useState("");
75  const [descriptionClassName, setDescriptionClassName] = useState("");
76  useEffect(() => {
77    if (typeof window === "undefined") return;
78 
79    const getZoom = () => {
80      const htmlElement = document.documentElement;
81      const computedZoom = window.getComputedStyle(htmlElement).zoom;
82      return computedZoom ? parseFloat(computedZoom) : 1;
83    };
84 
85    const handleMouseMove = (e: MouseEvent) => {
86// … truncated