Animated Tooltip

scale x fade

Tooltip with scale+fade animation on hover. From Aceternity.

tooltipanimatedscaleaceternity

Code

tooltip-animated.tsx

"use client";
import { useState } from "react";

export function Tooltip({ label, children }: { label: string; children: React.ReactNode }) {
  const [show, setShow] = useState(false);
  return (
    <span className="relative inline-block"
      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}
      onFocus={() => setShow(true)} onBlur={() => setShow(false)}>
      {children}
      {show && (
        <span role="tooltip" className="absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap animate-[fadeIn_0.2s_ease-out] rounded-md bg-foreground px-3 py-1.5 text-xs text-background">
          {label}
        </span>
      )}
    </span>
  );
}

globals.css: @keyframes fadeIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: translateY(0) } }

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Animated Tooltip component and wire it to my accent.”