How to highlight more than one element with introjs?

Question

I have different DOM elements I want highlighted with the JS library intro.js. The problem seems to be that I can just define one element to be highlighted:

introjs.setOptions({
        steps: [
            {
                element: '.element1',
                intro: 'Lorem ipsum...',
                position: 'bottom'
            },
            {
                element: '.element2',
                intro: 'Lorem ipsum...',
                position: 'top'
            }
        ]
    });

I haven't found any option that lets me choose more than 1 element. Do I have to create more instances of the introjs object to make this possible?

Oops! Tried introjs and that tag didn't exist.. didn't think of intro.js. Thanks! :) — David, Jan 03 '16 at 17:54
Nice. Check my answer. you should pass node not the selector string ! — Venkat.R, Jan 03 '16 at 17:56
It is not possibile, even of you create one more instance of introjs, they will not work together — Aminadav Glickshtein, Jan 03 '16 at 17:59
You answer not work. @david want to see to highlight two elements ad the same time in the same step — Aminadav Glickshtein, Jan 03 '16 at 18:08

score 0 · Answer 1 · answered Jan 03 '16 at 18:08

By default intro.js start the intro, by adding a gray box layer to the body of the document. This is why if you try to load the intro.js library twice, it willnot work. Only one step can be shown at a time.

If you want, you can load each of the introJs to another container. And they can work together:

You can do it, by start introJs, and specify the parent element. For example:

introJs($('h1').parent()[0]).setOptions({
  steps:[
    {element:$('h1')[0],intro:'hi',position:'bottom'},
  ]}).start();

a2=introJs($('h2').parent()[0]).setOptions({
  steps:[
  {element:$('h2'),intro:'hi',position:'bottom'},
]}).start()

You can synchronize both intro.js instance by using onchange event.

score -1 · Answer 2 · answered Jan 03 '16 at 17:56

You should pass the Node (using document.___ or $('.class') ) not only the Selector. check the below snippet.

steps: [
              { 
                intro: "Hello world!"
              },
              {
                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.'
              }
            ]

Reference URL:
https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html

How to highlight more than one element with introjs?

2 Answers2