IntroJS onafterchange事件早于Tooltip定位，如何后置修改提示框位置？

我之前也碰到过一模一样的情况——在onafterchange事件里修改提示框的位置，总是被IntroJS自带的位置计算结果覆盖。核心原因是IntroJS触发afterchange事件后，还有同步的位置调整逻辑没执行完，导致我们的自定义修改先生效，随后就被它的计算结果冲掉了。这里有两个靠谱的解决思路：

方法一：用setTimeout延迟执行修改（推荐） #

利用JavaScript的事件循环机制，把你的位置修改代码放到下一个宏任务队列里，这样就能等IntroJS完成所有同步的位置计算后再执行。哪怕设置延迟0毫秒也有效，因为它会把任务排到当前同步流程之后：

introJs()
  .on('afterchange', function(targetElement) {
    setTimeout(() => {
      const tooltip = document.querySelector('.introjs-tooltip');
      if (!tooltip) return;

      // 针对不同步骤自定义位置
      if (targetElement.classList.contains('step1')) {
        tooltip.style.top = '30px';
        tooltip.style.left = '80px';
      } else if (targetElement.id === 'step2') {
        tooltip.style.top = '120px';
        tooltip.style.left = '250px';
      }
    }, 0);
  })
  .start();

这个方法的优势是不依赖IntroJS的内部实现，兼容性极强，哪怕IntroJS版本更新也不容易出问题。

方法二：覆盖IntroJS的位置计算方法（进阶） #

如果你想更深度地嵌入到IntroJS的流程里，可以重写它内部的_positionTooltip方法——这是IntroJS用来计算提示框位置的核心函数。我们先保存原方法，执行完默认逻辑后再插入自己的修改：

const introInstance = introJs();
// 保存原始的位置计算方法
const originalPositionTooltip = introInstance._positionTooltip;

// 重写方法
introInstance._positionTooltip = function() {
  // 先让IntroJS完成默认的位置计算
  originalPositionTooltip.call(this);
  
  // 再执行你的自定义位置调整
  const tooltip = document.querySelector('.introjs-tooltip');
  if (tooltip) {
    tooltip.style.top = 'xxxpx';
    tooltip.style.left = 'xxxpx';
  }
};

// 启动引导
introInstance.start();

⚠️ 注意：这个方法依赖IntroJS的私有内部方法，未来版本更新可能会改动方法名或逻辑，所以使用时需要多留意版本兼容性。

内容的提问来源于stack exchange，提问作者Roger Knowles