DISCLOSURE · COMPONENT
Tooltip
A little context, exactly where someone needs it.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { Button, Tooltip } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
const [saved, setSaved] = useState(false);
return <div style={{ padding: "70px 16px", textAlign: "center" }}><Tooltip content="Save a draft in this preview only." placement="top" defaultOpen={state === "open"} delay={100}><Button onClick={() => setSaved(true)}>Save draft</Button></Tooltip><p role="status" style={{ marginTop: 24 }}>{saved ? "Draft saved in this demo." : "Hover or focus the button for a little guidance."}</p></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
A tooltip attached to a real button appears on hover or keyboard focus. Its supporting text explains a demo action; activating the button reports a local save.
Try it
Hover or focus Save draft, then activate it. Compare the initially open state.