Add steps in Javascript

[schuesslerf]

Hello,

I wonder if in the "pour" version pure version of intro.js (without angular directive), there is a way to define the steps in Javascript, just like in angular directive, so something like:

this.IntroOptions = {
            steps: [
                {
                    element: document.querySelector('#step1'),
                    intro: "This is the first tooltip."
                },
                {
                    element: document.querySelectorAll('#step2')[0],
                    intro: "<strong>You</strong> can also <em>include</em> HTML",
                    position: 'right'
                },
                {
                    element: '.nicediv',
                    intro: 'More features, more fun.'
                },
                {
                    element: '#step4',
                    intro: "Another step.",
                    position: 'bottom'
                },
                {
                    element: '#step5',
                    intro: 'Get it, use it.'
                }
            ],
            showStepNumbers: false,
            showBullets: false,
            exitOnOverlayClick: true,
            exitOnEsc: true,
            nextLabel: '<strong>NEXT!</strong>',
            prevLabel: '<span style="color:green">Previous</span>',
            skipLabel: 'Exit',
            doneLabel: 'Thanks',
            showProgress: true,
            showButtons: true
        };

I only found the thing to work with changes in HTML, so adding data-step and data-intro attributes to the HTML element. Is there a way to that programatically as well?

[afshinm]

did you solve it?

[schuesslerf]

Yes, I found that example (https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html), sorry I didn't see that before.

[schuesslerf]

Hmm, it doesn't seem to work completely yet, the 'Hello World' works, but when defining a selector, it gets to the upper left corner and not to the element.

[schuesslerf]

Alright, got that, too. Thanks for help :+1:

[afshinm]

cheers

[schuesslerf]

I figured one more thing out, that I'm wondering about: Is it normal that you can show the hints only once? After looking at them (or using the new function to hide all of them) I'm not able to show them any more, same for your example here (http://introjs.com/example/programmatic/hint.html).... Is there any way to fix it?

Edit: What I'm talking about in that comments are the hints, not the normal steps.

[carlganz]

See #616