Reshaped Tooltip

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.

by reshaped

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>
  );
}