Question

在使用introjs.js时，我试图设置工具提示（.introjs-tooltip）的位置但是，如果我使用onafterchange事件，我的代码会运行，然后工具提示的位置由introjs设置，并且我的顶部和左侧值被覆盖。如何在introjs对工具提示的位置进行计算之后如何进行更改？

<div>
  <div class="divStep step1">
    <span>Nothing much going on here</span>
  </div>
  <div id="step2" class="divStep step2">
    <span>This is step 2</span>
  </div>
  <div id="step3" class="divStep step3">
    <span>This is step 3</span>
  </div>
</div>

body {
    background-color: #00eeee;
}

.divStep {
    display: block;
    height: 100px;
    width: 400px;
    background-color: #fff;
    margin: 10px;
    padding: 10px;
}

.tt-step2 {
    top: 0 !important;
    left: 0 !important;
    background-color: #ff0000;
}

var myIntro = {
    tooltipPosition: 'bottom',
    steps: [
        {
            intro: 'Howdy! This is step 1'
        },
        {
            element: '#step2',
            intro: 'This is step 2',
            onbeforechange: function(){
                console.log('onbeforechange step 2');
              $('.introjs-tooltip').addClass('tt-step2');
              console.log('has class? ' + $('.introjs-tooltip').hasClass('tt-step2'));
            },
            onchange: function(){
                console.log('onchange step 2');
              $('.introjs-tooltip').addClass('tt-step2');
              console.log('has class? ' + $('.introjs-tooltip').hasClass('tt-step2'));
            },
            onafterchange: function(){
                console.log('onafterchange step 2');
              $('.introjs-tooltip').addClass('tt-step2');
              console.log('has class? ' + $('.introjs-tooltip').hasClass('tt-step2'));
            }
        },
        {
            element: '#step3',
            intro: 'This is step 3'
        }
    ]
}

function launchIntro(){
    var intro = introJs();
    intro.setOptions(myIntro);

    intro
        .onbeforechange(function(){
                currentStep = this._options.steps[this._currentStep];
            if(currentStep.onbeforechange) {
                currentStep.onbeforechange();
            }
        })
        .onchange(function(){
            currentStep = this._options.steps[this._currentStep];
            if(currentStep.onchange) {
                currentStep.onchange();
            }
        })
        .onafterchange(function(){
            currentStep = this._options.steps[this._currentStep];
            if(currentStep.onafterchange) {
                currentStep.onafterchange();
            }
        })
        .start();
}

launchIntro();

Answer 1

我遇到了类似的问题。当前IntroJS库具有open issue on github。

我分配了大量的内容来自定义元素样式并调整某些行为。

我设法使用MutationObserver

处理了这种情况

这是一个示例片段：

const observer = new MutationObserver((mutations) => {  
    const { target } = mutations[0];

    document.querySelector('.introjs-tooltip').style.top = `${      
        document.querySelector('.introjs-helperLayer').clientHeight
        - document.querySelector('.introjs-tooltip').clientHeight - 10}px`;

    return null; });

observer.observe(   
    document.querySelector('.introjs-tooltip'),     
    { attributes: true, attributeOldValue: true, attributeFilter: ['style'] }, 
);

introjs onafterchange在工具提示定位之前触发

1 个答案: