javascript - intro.js steps and tooltip position works fine, except when "back" is pressed - Stack Overflow

admin管理员组

文章数量:1430002

I have set up an intro of a web page using the steps and setoptions functionality, and it works fine except when the user presses back.

The two issues I find are:

1. scrolltoelement works fine going forward, but the tooltip goes partly off screen when going backwards
2. the element selected in the first step is the entire page, so I use an "onafterchange" callback to reset the tooltip top and right offset. This works fine, except it appears to be ignored (or overwritten) when the back key is pressed

The javascript is:

var introProfile = introJs();
introProfile.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro_step1',
            intro: 'Wele to your example 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 plete 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 with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
introProfile.onplete(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();

All I am doing in the HTML is setting the element id for intro_step1 to intro_step6

You can see the fiddle here: /

Any idea why "back" functionality is different from forward?

I have set up an intro of a web page using the steps and setoptions functionality, and it works fine except when the user presses back.

The two issues I find are:

1. scrolltoelement works fine going forward, but the tooltip goes partly off screen when going backwards
2. the element selected in the first step is the entire page, so I use an "onafterchange" callback to reset the tooltip top and right offset. This works fine, except it appears to be ignored (or overwritten) when the back key is pressed

The javascript is:

var introProfile = introJs();
introProfile.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro_step1',
            intro: 'Wele to your example. 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 plete 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. with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
introProfile.onplete(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();

All I am doing in the HTML is setting the element id for intro_step1 to intro_step6

You can see the fiddle here: https://jsfiddle/brianlmerritt/3ocyuu65/10/

Any idea why "back" functionality is different from forward?

• javascript
• intro.js

Share Improve this question Follow asked Aug 11, 2015 at 11:34 brianlmerrittbrianlmerritt 2,85211 gold badge3636 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The problem was you wanted to change the position of the tooltip for the 1st step by using -

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

This was added in the "onafterchange" function -

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

    } 
    });

Now this function was as expected called when you initialised the introjs - meaning after the position was changed by the introjs and then was overridden by your positions in the "onafterchange" function

But in case of when you hit back this function was called after the position was changed by introjs. So to fix this i used "setTimeout"

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

So now your positions are now overridden for the tooltip

Note: Your code would have worked if the poition changes for the tooltip was pleted first and then the "onafterchange" function was called.

Fiddle: https://jsfiddle/kushal812/3ocyuu65/11/

Let me know if you find a better way!!

Really IntroJS is showing some errors when using the Back button. Here is the solution using Ionic with the Typescript Framework:

export class HomePage {

 introApp = introJs.introJs(); //Declared the IntroJS

 ...

 this.intro(); // Call the method

 ...

 intro() {  this.introApp.setOptions({...})} //Set the options in IntroJS

 //Bug Correction

 this.introApp.onafterchange(function(targetElement) {
  console.log(targetElement.id);
  switch (targetElement.id){
      case "b1":
          setTimeout(function(){
            var element = document.getElementsByClassName('introjs-tooltip');
            var boxArrow = document.getElementsByClassName('introjs-arrow top');
            var numberLayer = document.getElementsByClassName('introjs-helperNumberLayer');
            element.item(0).setAttribute("style", "top:210px;");
            boxArrow.item(0).setAttribute("style", "display: block");
            numberLayer.item(0).setAttribute("style", "left: 0; top:0;");
          },600)
       } 
  });

本文标签：