intro.js not working for specific elements based on classes

Question

I am not able to start intro.js with specific elements which are have class='test'.I am using Intro.js v0.9.0.

as per documentation, I written code just like following way.

 <li class="test" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chart" id="chart-btn"><i class="fa fa-bar-chart-o fa-lg"></i></a></li>
 <li class="test123" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Reset" id="reset"><i class="fa fa-repeat fa-lg"></i></a></li>
 <li class="test" data-intro="second Step" data-step="2"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Compute" id="category"><i class="fa fa-play fa-lg"></i></a></li>

I tried to start intro like this

 introJs(".test").start();

It's not working.I goggled some guys suggested regarding this,I tried those ways also but it's not working.

How can I fix this.

score 10 · Answer 1 · answered Jul 25 '14 at 12:14

I implemented with stepswhich is provided by intro.js plugin option like in the following way.

 var intro = introJs();
      intro.setOptions({
        steps: [
          { 
            intro: "Hello world!"
          },
          {
            element: document.getElementById("step1"),
            intro: "This is a tooltip."
          },
          {
            element: document.querySelectorAll('#step2')[0],
            intro: "Ok, wasn't that fun?",
            position: 'right'
          },
          {
            element: '#step3',
            intro: 'More features, more fun.',
            position: 'left'
          },
          {
            element: '#step4',
            intro: "Another step.",
            position: 'bottom'
          },
          {
            element: '#step5',
            intro: 'Get it, use it.'
          }
        ],
        showStepNumbers:false
      });

      intro.start();

thank you, really helped, I used 'document.querySelectorAll('.sftpImport.step1')[0]' for addressing multiple scenarios steps by classes — FantomX1, Nov 21 '17 at 18:13

score 2 · Answer 2 · answered Oct 31 '14 at 11:26

If you see the you can see that the introJs parameter is for the farm of the steps/elements. So your code should be something like:

<div class='test'>
   <div class="span6 test" data-step="2" data-intro="Ok, wasn't that fun?">
        <h4>Easy to Use</h4>
      </div>
  </div>

And now introJs('.test').start(); should work correctly.

score 2 · Answer 3 · edited Mar 14 '18 at 20:43

Here is a complete example after you include/link the intro.js and introjs.css files to your project

$(document).ready(function startIntro() {
    var intro = introJs('body');
    intro.setOptions({
        steps: [
                  {
                      intro: "Hello world!"
                  },
                  {
                      intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip."
                  },
                  {
                      element: document.querySelector('#step1'),
                      intro: "This is a tooltip."
                  },
                  {
                      element: document.querySelectorAll('#step2')[0],
                      intro: "Ok, wasn't that fun?",
                      position: 'right'
                  },
                  {
                      element: '#step3',
                      intro: 'More features, more fun.',
                      position: 'left'
                  },
                  {
                      element: '#step4',
                      intro: "Another step.",
                      position: 'bottom'
                  },
                  {
                      element: '#step5',
                      intro: 'Get it, use it.'
                  }
            ]
    });
    intro.start();
});

score 1 · Answer 4 · answered Oct 27 '18 at 06:08

Based on the new API they provided, introducing an example of group feature. So, your example could work if you added an attribute called data-intro-group and handle the group name, like this:

<li data-intro-group="test" class="test" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chart" id="chart-btn"><i class="fa fa-bar-chart-o fa-lg"></i></a></li>
<li data-intro-group="test123" class="test123" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Reset" id="reset"><i class="fa fa-repeat fa-lg"></i></a></li>
<li data-intro-group="test" class="test" data-intro="second Step" data-step="2"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Compute" id="category"><i class="fa fa-play fa-lg"></i></a></li>

Then, start intro for the specific group let's say test by: introJs().start('test');

Hope this helps!

this one worked best for me and I can't find the docs for it anywhere on introjs.com so thanks! — Adam, Oct 01 '20 at 02:24

intro.js not working for specific elements based on classes

4 Answers4