Question

我已经使用步骤和设置选项功能设置了网页的介绍，除非用户按下后才能正常工作。

我发现的两个问题是：

scrolltoelement工作正常，但工具提示在向后移动时会部分离开屏幕
在第一步中选择的元素是整个页面，所以我使用＆＃34; onafterchange＆＃34;回调以重置工具提示的顶部和右侧偏移。这样可以正常工作，但按下后退键时它似乎被忽略（或覆盖）

javascript是：

var introProfile = introJs();
introProfile.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
introProfile.oncomplete(function() {
    ;
});
introProfile.onexit(function(){
    ;
});
introProfile.onchange(function(targetElement) {
    ; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
    console.log(targetElement.id);
    switch (targetElement.id){
        case "intro_step1":
            $('.introjs-tooltip').css({top:'80px',left:'200px'});
    } 
});
introProfile.onbeforechange(function(targetElement) {
    ; // add change bits here
});

introProfile.start();

我在HTML中所做的就是将intro_step1的元素id设置为intro_step6

你可以在这里看到小提琴：https://jsfiddle.net/brianlmerritt/3ocyuu65/10/

任何想法为什么＆＃34;返回＆＃34;功能与前进不同？

Answer 1

问题是您想使用 -

更改第一步的工具提示的位置

$('.introjs-tooltip').css({top:'80px',left:'200px'});

这是在＆＃34; onafterchange＆＃34;中添加的。功能 -

 introProfile.onafterchange(function(targetElement) {
    console.log(targetElement.id);
    switch (targetElement.id){
        case "intro_step1":
           $('.introjs-tooltip').css({top:'80px',left:'200px'});

    } 
    });

现在，当你初始化introjs时，这个函数就像预期一样被调用了 - 这意味着在introjs改变了位置之后，然后被你在＆＃34; onafterchange＆＃34;中的位置覆盖了。功能

但是在你回击的情况下，在introjs改变位置后调用了这个函数。所以为了解决这个问题，我使用了＆＃34; setTimeout＆＃34;

setTimeout(function(){
    $('.introjs-tooltip').css({top:'80px',left:'200px'});
},600)

现在，您的职位现在已被覆盖了工具提示

注意：如果首先完成工具提示的更改，然后更改＆＃34; onafterchange＆＃34;那么您的代码将起作用。功能被称为。

小提琴：https://jsfiddle.net/kushal812/3ocyuu65/11/

如果您找到更好的方法，请告诉我！

intro.js步骤和工具提示位置工作正常，除非＆＃34;返回＆＃34;被压了

1 个答案: