Function TooltipExampleScene

components/docs/examples/tooltip-example.tsx:24–79

(p: TooltipExampleProps = {})

}

export const TooltipExampleScene = (p: TooltipExampleProps = {}) => {
  // Cursor: park top-left → ease onto button (arrives 28) → hover →
  // move away at frame 90 (arrives 110).
  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 },
  ]);

  // Button: idle → hover as cursor arrives, back to idle as cursor leaves.
  const buttonStyle = useButtonTransition([
    { at: 28, state: "hover", duration: 8 },
    { at: 100, state: "idle", duration: 8 },
  ]);

  // Tooltip: fades in shortly after cursor arrives, fades out as cursor leaves.
  const tooltipStyle = useTooltipTransition([
    { at: 36, state: "visible", duration: 8 },
    { at: 100, state: "hidden", duration: 8 },
  ]);

  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      {/* Anchor — the button is centered in the canvas. */}
      <div
        style={{
          width: "100%",
          position: "absolute",
          left: "50%",
          top: "50%",
          transform: "translate(-50%, -50%)",
        }}
      >
        <Button label="Hover me" style={buttonStyle} />

        {/* Tooltip is anchored relative to the button: centered above it. */}
        <div
          style={{
            position: "absolute",
            bottom: "calc(100% + 32px)",
            left: "50%",
            transform: "translateX(-50%)",
          }}
        >
          <Tooltip
            label={p.label ?? "Add to library"}
            side="top"
            style={tooltipStyle}
          />
        </div>
      </div>

      <Cursor style={cursorStyle} variant="pointer" />
    </div>
  );
};

export const tooltipExampleCode = (