Motion Tooltip

Component

About

A tooltip that appears next to a hover, focus, or tap trigger (or follows the cursor), using floating-ui for placement and animated motion for its entrance/exit.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Motion Tooltip to your project and fits it to your theme.

Code

How Motion Tooltip is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as Icons from "lucide-react";
import { Tooltip } from "@/components/ui/motion-tooltip";

const placements = [
  {
    side: "top",
    label: "Top",
    icon: Icons.ArrowUp,
    position: "col-start-2 row-start-1",
  },
  {
    side: "left",
    label: "Left",
    icon: Icons.ArrowLeft,
    position: "col-start-1 row-start-2",
  },
  {
    side: "right",
    label: "Right",
    icon: Icons.ArrowRight,
    position: "col-start-3 row-start-2",
  },
  {
    side: "bottom",
    label: "Bottom",
    icon: Icons.ArrowDown,
    position: "col-start-2 row-start-3",
  },
] as const;

export function TooltipPreview() {
  return (
    <div className="flex w-full flex-col items-center gap-8 py-6">
      <div className="grid grid-cols-3 gap-x-3 gap-y-5">
        {placements.map(({ side, label, icon: Icon, position }) => (
          <Tooltip
            key={side}
            content="More context"
            side={side}
            wrapperClassName={position}
          >
            <button
              type="button"
              className="inline-flex h-10 w-20 items-center justify-center gap-1.5 rounded-lg border border-border bg-card text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
            >
              <Icon
                aria-hidden="true"
                className="size-3.5 text-muted-foreground"
              />
              {label}
            </button>
          </Tooltip>
        ))}
      </div>
      <p className="text-center text-xs text-muted-foreground">
        Hover or focus. Press Esc to dismiss.
      </p>
    </div>
  );
}

export default TooltipPreview;