fix(tooltip): delay positioning using observer to handle scrollable container visibility

Author: Parvinmh

src/packages/tour/components/HelperLayer.ts

@@ -1,7 +1,7 @@
 import { style } from "../../../util/style";
 import dom, { State } from "../../dom";
 import { helperLayerClassName } from "../classNames";
-import { setPositionRelativeToStep } from "../position";
+import { waitAndSetPositionRelativeToStep } from "../position";
 import { TourStep } from "../steps";
 
 const { div } = dom.tags;
@@ -64,7 +64,8 @@ export const HelperLayer = ({
     // set the new position if the step or refreshes change
     if (!step.val || refreshes.val === undefined) return;
 
-    setPositionRelativeToStep(
+    
+    waitAndSetPositionRelativeToStep(
       targetElement,
       helperLayer,
       step.val,

src/packages/tour/position.ts

@@ -18,3 +18,37 @@ export const setPositionRelativeToStep = (
     step.position === "floating" ? 0 : padding
   );
 };
+
+/**
+ * Waits for the target element to be visible in viewport, then sets tooltip position.
+ */
+export const waitAndSetPositionRelativeToStep = (
+  relativeElement: HTMLElement,
+  tooltipLayer: HTMLElement,
+  step: TourStep,
+  padding: number
+) => {
+  const target = step.element as HTMLElement;
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+
+      if (entry.isIntersecting) {
+        observer.disconnect();
+
+        setPositionRelativeToStep(
+          relativeElement,
+          tooltipLayer,
+          step,
+          padding
+        );
+      }
+    },
+    {
+      threshold: 0.1,
+    }
+  );
+
+  observer.observe(target);
+};