Matte Tooltip Overlay

Cards

About

A dark, matte-styled tooltip that opens on hover, keyboard focus or tap, auto-flips above/below its trigger to stay in view, and can be pinned open with a click.

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

Code

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

Usage.tsx

"use client";

import MatteTooltipOverlay from "@/components/ui/matte-tooltip-overlay";

export default function MatteTooltipOverlayDemo() {
  return (
    <div
      className="flex h-screen w-full items-center justify-center"
      style={{
        background:
          "radial-gradient(ellipse at 25% 0%, #f7f8f9, transparent 95%), linear-gradient(145deg, #eef0f2, #e4e7eb)",
      }}
    >
      <MatteTooltipOverlay />
    </div>
  );
}