How to set IntroJS step on a fixed element?

Question

I got a fixed element (because that element has to stay fixed at a certain position) with these attributes:

style="position: fixed; width: 270px; right: 60px; height: 500px;"

Whenever I press through the introJS steps, it would show the highlighted area a little bit off:

How I call IntroJS:

  var intro = introJs(); 
  var options_before = {

    steps: [
      {
        element: ".bar",
        intro: "this is step 1"
      },
      {
        element: "div#fooId",
        intro: "Why does step 2 look so weird?="
      }
    ]
  }

  intro.setOptions(options_before);
  intro.start();

I tried to reposition (changing top and margin attributes) and resize that element, but the highlighted area of introJS would never fit to the area I want to hightlight.

score 1 · Accepted Answer · edited Jun 15 '16 at 08:05

1

Give an id to element and in introJs steps

steps: [ { element: "#yourID", intro: "Your Description" } ]

Try this before you call intro.start().

intro.onafterchange(function(targetElement) {
    if(this._currentStep == 1){
        overlay = document.getElementsByClassName("introjs-fixedTooltip");
        for(i=0; i<overlay.length; i++) {
            overlay[i].style.left = '10px';
            overlay[i].style.right = '10px';
            overlay[i].style.position = 'fixed';
            //Set css properties like this.
        }
    }
});

edited Jun 15 '16 at 08:05

thadeuszlay

2,787
7
32
67

answered Jun 07 '16 at 11:05

sudhirk496

74
3

That's exactly what I did and it turned out the way I displayed in my question. – thadeuszlay Jun 07 '16 at 14:43
may be "div#fooId" element selection is going wrong. See if edited code works for you. – sudhirk496 Jun 08 '16 at 12:31
It works, but you also have to add a "position: fixed", i.e. 'overlay[i].style.position = 'fixed';' (Otherwise the overlay loses it's focus if you press the next- and previous-button.) If you would add this to your answer, then I'd accept your's a the solution. – thadeuszlay Jun 13 '16 at 22:57

How to set IntroJS step on a fixed element?

1 Answers1