setPositionRelativeTo

src/packages/tour/position.ts

@@ -0,0 +1,20 @@
+import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
+import { TourStep } from "./steps";
+
+/**
+ * Sets the position of the element relative to the TourStep
+ * @api private
+ */
+export const setPositionRelativeToStep = (
+  relativeElement: HTMLElement,
+  element: HTMLElement,
+  step: TourStep,
+  padding: number
+) => {
+  setPositionRelativeTo(
+    relativeElement,
+    element,
+    step.element as HTMLElement,
+    step.position === "floating" ? 0 : padding
+  );
+};

src/packages/tour/refresh.ts

@@ -1,11 +1,14 @@
-import { reAlignHints } from "../../core/hint";
-import setHelperLayerPosition from "../../core/setHelperLayerPosition";
 import placeTooltip from "../../core/placeTooltip";
-import fetchIntroSteps from "./fetchSteps";
 import { _recreateBullets, _updateProgressBar } from "./showElement";
 import { Tour } from "./tour";
 import { getElementByClassName } from "src/util/queryElement";
-import { disableInteractionClassName, helperLayerClassName, tooltipReferenceLayerClassName } from "./classNames";
+import {
+  disableInteractionClassName,
+  helperLayerClassName,
+  tooltipReferenceLayerClassName,
+} from "./classNames";
+import { setPositionRelativeToStep } from "./position";
+import { fetchSteps } from "./steps";
 
 /**
  * Update placement of the intro objects on the screen
@@ -28,33 +31,30 @@ export default function refresh(tour: Tour, refreshSteps?: boolean) {
 
   // re-align intros
   const targetElement = tour.getTargetElement();
-  const helperLayerPadding = tour.getOption('helperElementPadding');
-  setHelperLayerPosition(
+  const helperLayerPadding = tour.getOption("helperElementPadding");
+  setPositionRelativeToStep(
     targetElement,
     helperLayer,
-    step.element as HTMLElement,
-    step.position,
+    step,
     helperLayerPadding
   );
-  setHelperLayerPosition(
+  setPositionRelativeToStep(
     targetElement,
     referenceLayer,
-    step.element as HTMLElement,
-    step.position,
+    step,
     helperLayerPadding
   );
-  setHelperLayerPosition(
+  setPositionRelativeToStep(
     targetElement,
     disableInteractionLayer,
-    step.element as HTMLElement,
-    step.position,
+    step,
     helperLayerPadding
   );
 
   if (refreshSteps) {
-    intro._introItems = fetchIntroSteps(intro, intro._targetElement);
-    _recreateBullets(intro, step);
-    _updateProgressBar(referenceLayer, currentStep, intro._introItems.length);
+    tour.setSteps(fetchSteps(tour));
+    _recreateBullets(tour, step);
+    _updateProgressBar(referenceLayer, currentStep, tour.getSteps().length);
   }
 
   // re-align tooltip
@@ -64,15 +64,16 @@ export default function refresh(tour: Tour, refreshSteps?: boolean) {
 
   if (oldTooltipContainer && oldArrowLayer) {
     placeTooltip(
-      intro,
-      intro._introItems[currentStep],
       oldTooltipContainer,
-      oldArrowLayer
+      oldArrowLayer,
+      step.element as HTMLElement,
+      step.position,
+      tour.getOption("positionPrecedence"),
+      tour.getOption("showStepNumbers"),
+      tour.getOption("autoPosition"),
+      step.tooltipClass ?? tour.getOption("tooltipClass")
     );
   }
 
-  //re-align hints
-  reAlignHints(intro);
-
-  return intro;
+  return tour;
 }

src/packages/tour/removeShowElement.ts

@@ -1,5 +1,5 @@
 import { queryElementsByClassName } from "src/util/queryElement";
-import removeClass from "../../util/removeClass";
+import { removeClass } from "../../util/className";
 import { showElementClassName } from "./classNames";
 
 /**

src/packages/tour/showElement.ts

@@ -5,7 +5,6 @@ import exitIntro from "./exitIntro";
 import { addClass, setClass } from "../../util/className";
 import setAnchorAsButton from "../../util/setAnchorAsButton";
 import { TourStep, nextStep, previousStep } from "./steps";
-import setHelperLayerPosition from "./setHelperLayerPosition";
 import placeTooltip from "../../core/placeTooltip";
 import removeShowElement from "./removeShowElement";
 import createElement from "../../util/createElement";
@@ -42,6 +41,7 @@ import {
   queryElement,
   queryElementByClassName,
 } from "../../util/queryElement";
+import { setPositionRelativeToStep } from "./position";
 
 /**
  * Gets the current progress percentage
@@ -72,7 +72,12 @@ export const _disableInteraction = (tour: Tour, step: TourStep) => {
     tour.getTargetElement().appendChild(disableInteractionLayer);
   }
 
-  setHelperLayerPosition(tour, step, disableInteractionLayer);
+  setPositionRelativeToStep(
+    tour.getTargetElement(),
+    disableInteractionLayer,
+    step,
+    tour.getOption("helperElementPadding")
+  );
 };
 
 /**
@@ -304,8 +309,19 @@ export default async function _showElement(tour: Tour, step: TourStep) {
     );
 
     // set new position to helper layer
-    setHelperLayerPosition(tour, step, oldHelperLayer);
-    setHelperLayerPosition(tour, step, oldReferenceLayer);
+    const helperLayerPadding = tour.getOption("helperElementPadding");
+    setPositionRelativeToStep(
+      tour.getTargetElement(),
+      oldHelperLayer,
+      step,
+      helperLayerPadding
+    );
+    setPositionRelativeToStep(
+      tour.getTargetElement(),
+      oldReferenceLayer,
+      step,
+      helperLayerPadding
+    );
 
     //remove old classes if the element still exist
     removeShowElement();
@@ -415,8 +431,19 @@ export default async function _showElement(tour: Tour, step: TourStep) {
     );
 
     //set new position to helper layer
-    setHelperLayerPosition(tour, step, helperLayer);
-    setHelperLayerPosition(tour, step, referenceLayer);
+    const helperLayerPadding = tour.getOption("helperElementPadding");
+    setPositionRelativeToStep(
+      tour.getTargetElement(),
+      helperLayer,
+      step,
+      helperLayerPadding
+    );
+    setPositionRelativeToStep(
+      tour.getTargetElement(),
+      referenceLayer,
+      step,
+      helperLayerPadding
+    );
 
     //add helper layer to target element
     appendChild(tour.getTargetElement(), helperLayer, true);

src/util/setPositionRelativeTo.ts

@@ -0,0 +1,38 @@
+import getOffset from "./getOffset";
+import isFixed from "./isFixed";
+import { removeClass, addClass } from "./className";
+import setStyle from "./setStyle";
+
+/**
+ * Sets the position of the element relative to the target element
+ * @api private
+ */
+export const setPositionRelativeTo = (
+  relativeElement: HTMLElement,
+  element: HTMLElement,
+  targetElement: HTMLElement,
+  padding: number
+) => {
+  if (!element || !relativeElement || !targetElement) {
+    return;
+  }
+
+  // If the target element is fixed, the tooltip should be fixed as well.
+  // Otherwise, remove a fixed class that may be left over from the previous
+  // step.
+  if (targetElement instanceof Element && isFixed(targetElement)) {
+    addClass(element, "introjs-fixedTooltip");
+  } else {
+    removeClass(element, "introjs-fixedTooltip");
+  }
+
+  const position = getOffset(targetElement, relativeElement);
+
+  //set new position to helper layer
+  setStyle(element, {
+    width: `${position.width + padding}px`,
+    height: `${position.height + padding}px`,
+    top: `${position.top - padding / 2}px`,
+    left: `${position.left - padding / 2}px`,
+  });
+};