Tooltip

Copyimport { Tooltip } from "@/components/ui/tooltip";

Copy<Tooltip label="Add to library" side="top" state="visible" />

Copyimport { H, W } from "@/lib/customizer-config";
import { Cursor } from "@/components/framecn/cursor";
import { useCursorPath } from "@/components/framecn/use-cursor-path";
import { Button } from "@/components/framecn/button";
import { useButtonTransition } from "@/components/framecn/use-button-transition";
import { Tooltip } from "@/components/framecn/tooltip";
import { useTooltipTransition } from "@/components/framecn/use-tooltip-transition";
 
const BTN_X = W / 2;
const BTN_Y = H / 2;
const AWAY_X = W / 2 - 440;
const AWAY_Y = H / 2 - 260;
 
const cursorStyle = useCursorPath([
  { at: 0, x: 80, y: 60 },
  { at: 28, x: BTN_X, y: BTN_Y, duration: 24 },
  { at: 110, x: AWAY_X, y: AWAY_Y, duration: 20 },
]);
 
const buttonStyle = useButtonTransition([
  { at: 28, state: "hover", duration: 8 },
  { at: 100, state: "idle", duration: 8 },
]);
 
const tooltipStyle = useTooltipTransition([
  { at: 36, state: "visible", duration: 8 },
  { at: 100, state: "hidden", duration: 8 },
]);
 
<>
  <Button label="Hover me" style={buttonStyle} />
  <Tooltip label="Add to library" side="top" style={tooltipStyle} />
  <Cursor style={cursorStyle} variant="pointer" />
</>;