onbeforechange won't change CSS for initial step

[carlganz]

Hey @afshinm,

I found that even though onbeforechange triggers before the first step, it won't change CSS of the first tooltip. For subsequent steps the CSS in the tooltip is correctly updated.

Here is a JSfiddle: https://fiddle.jshell.net/booq3y2f/6/

var btn=document.getElementById("btn");

btn.onclick=function() {
    introJs().onbeforechange(function(targetElement) {

     switch (targetElement.getAttribute("data-step"))
    {
        case "1":
        alert("test")
            $(".introjs-tooltip").css("color", "red");  
        break;
        case "2":
            $(".introjs-tooltip").css("color", "blue");
        break;
    }

  }).start();
}

Press the button and the tour begins. Notice that the alert appears, but the color of the tooltip is not red. Go to the next step, and the text turns blue like expected. Now go back to step one and the tooltip turns red like you expect. Is there a reason it isn't rendering red initially?

Kind Regards, Carl

[luchillo17]

Maybe the first time doesn't exists since you calling onbeforechange, try the same with onchange and onafterchange and see what happens.

[ZizzyZizzy]

@carlganz If you add a javascript alert, you can see that the targetElement is undefined before the first step. The docs say it's supposed to have the element of the new step.

I downloaded a fresh copy from today, but it's even worse. None of the steps return a valid targetElement now, they are all undefined.

`introJs().onbeforechange(function(targetElement) {

var ElementID=$(targetElement).attr("id");

alert("Triggered onbeforechange with targetElement=" + ElementID);

}); `

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.