Physics Tooltip

Tooltips with spring-like entrance and follow behavior for dense interfaces.

"use client";

import { useEffect, useRef, useState } from "react";

export default function PhysicsTooltip() {
  const tooltipRef = useRef(null);
  const motionRef = useRef({ y: 24, velocity: 0, opacity: 0, target: 24 });
  const [open, setOpen] = useState(false);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const tooltip = tooltipRef.current;
    if (!tooltip) return;

const config = {
      stiffness: 0.16,
      damping: 0.78,
      offset: 24
    };

motionRef.current.target = open ? 0 : config.offset;

const animate = () => {
      const motion = motionRef.current;
      const force = (motion.target - motion.y) * config.stiffness;
      motion.velocity = (motion.velocity + force) * config.damping;
      motion.y += motion.velocity;
      motion.opacity += ((open ? 1 : 0) - motion.opacity) * 0.18;
      tooltip.style.opacity = String(motion.opacity);
      tooltip.style.transform = `translate3d(-50%, ${motion.y}px, 0)`;
      frame = requestAnimationFrame(animate);
    };

let frame = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(frame);
  }, [open]);

return (
    <div
      onPointerEnter={() => setOpen(true)}
      onPointerLeave={() => setOpen(false)}
      style={{ position: "relative", display: "inline-grid", placeItems: "center" }}
    >
      <button
        style={{
          background: "#3b82f6",
          color: "#ffffff",
          border: 0,
          borderRadius: 999,
          cursor: "pointer",
          font: "600 15px system-ui",
          padding: "14px 24px"
        }}
      >
        Hover me
      </button>
      <div
        ref={tooltipRef}
        style={{
          background: "#111827",
          borderRadius: 8,
          color: "#ffffff",
          font: "600 12px system-ui",
          left: "50%",
          opacity: 0,
          padding: "8px 10px",
          pointerEvents: "none",
          position: "absolute",
          top: -48,
          transform: `translate3d(-50%, 24px, 0)`,
          whiteSpace: "nowrap"
        }}
      >
        Spring tooltip
      </div>
    </div>
  );
}