Step number is not on top (introJs)

Question

I cannot seem to get the number of the step on top of the highlighted area as expected. I have version 0.5 of both js and css.

Any idea of what the problem is afshinm??

THanks a lot!

Answer 1

I have the same problem, but unfortunately I've been unable to find a clean solution. In my case I believe it has something to do with using bootstrap 2. I narrowed the cause down to stacking contexts and I tried playing around with opacity to fix it, which worked, but created more bugs - you can find more on the opacity fix here.

If you don't want to read all of that text - go through the parents of the element you are highlighting with intro.js and add "opacity: 0.99" and you might be lucky to fix the problem and not get hit with other problems.

However, if that is out of the question, then the solution I went with was to reposition the numbers via the intro.js onchange callback like so:

intro.onchange(function(targetElement) {
   $(".introjs-helperNumberLayer").css("top", "-32px");
   $(".introjs-helperNumberLayer").css("left", "-1px");
});

Thanks to this, the numbers are farther away from the contents and nothing overlaps anymore.