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.

Answer 1

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();

Answer 2

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.