Reshaped Tooltip

Buttons

About

Tooltip attached to any interactive element by passing its attributes to the trigger. Shows on hover with automatic viewport-aware repositioning, supports a configurable position, and can wrap disabled elements via the Actionable utility to keep them accessible.

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

Code

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

Usage.tsx

import { Actionable, Button, Reshaped } from "reshaped/bundle";
import Tooltip from "@/components/ui/reshaped-tooltip";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ minHeight: 320, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <Tooltip text="Tooltip content">
          {(attributes) => (
            <Actionable attributes={attributes} as="div">
              <Button disabled>Trigger</Button>
            </Actionable>
          )}
        </Tooltip>
      </div>
    </Reshaped>
  );
}