Function TutorialTooltip

src/browser/components/TutorialTooltip/TutorialTooltip.tsx:28–224

({
  step,
  currentStep,
  totalSteps,
  onNext,
  onDismiss,
  onDisableTutorial,
})

}

export const TutorialTooltip: React.FC<TutorialTooltipProps> = ({
  step,
  currentStep,
  totalSteps,
  onNext,
  onDismiss,
  onDisableTutorial,
}) => {
  const tooltipRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState<TooltipPosition | null>(null);
  const [showDisableOption, setShowDisableOption] = useState(false);

  useLayoutEffect(() => {
    const targetEl = document.querySelector(`[data-tutorial="${step.target}"]`);
    if (!targetEl || !tooltipRef.current) {
      return;
    }

    const calculatePosition = () => {
      const target = targetEl.getBoundingClientRect();
      const tooltip = tooltipRef.current!.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      const gap = 12;

      const preferredPosition = step.position ?? "bottom";
      let actualPosition = preferredPosition;
      let top: number;
      let left: number;

      // Try preferred position, flip if it doesn't fit
      if (preferredPosition === "bottom" || preferredPosition === "top") {
        if (preferredPosition === "bottom") {
          top = target.bottom + gap;
          if (top + tooltip.height > viewportHeight) {
            actualPosition = "top";
            top = target.top - tooltip.height - gap;
          }
        } else {
          top = target.top - tooltip.height - gap;
          if (top < 0) {
            actualPosition = "bottom";
            top = target.bottom + gap;
          }
        }
        // Center horizontally relative to target
        left = target.left + target.width / 2 - tooltip.width / 2;
      } else {
        // left or right
        if (preferredPosition === "right") {
          left = target.right + gap;
          if (left + tooltip.width > viewportWidth) {
            actualPosition = "left";
            left = target.left - tooltip.width - gap;
          }
        } else {
          left = target.left - tooltip.width - gap;
          if (left < 0) {