const wt = new WebTour();
wt.highlight('#target');

const wt = new WebTour();
const steps = [
    {
        element: '#step_1',            //target element (if not defined then the popover will act like a modal at the center of the screen)
        title: 'Popover title',         //this is option if you don't want to add title
        content: 'Popover content',     //can be string or html string
        placement: 'right-start',       //top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, bottom, bottom-start, bottom-end
    },
    ...
];

wt.setSteps(steps);
wt.start();

const wt = new WebTour();
const steps = [
    {
        element: '#step_1',           
        title: 'Popover title',        
        content: 'Popover content',     
        placement: 'left-start',     
        onNext: function () {  //or ()=> {}
            //perform actions here
        },
        onPrevious: function () {
            //undo actions here
        }
    },    
    {
        element: '#step_2',           
        title: 'Popover title',        
        content: 'Popover content',     
        placement: 'right-start',     
        onNext: function () { 
            //for dynamic elements - pause and resume onNext action
            wt.isPaused = true;                 //pause tour
            wt.showLoader();                    //display a loader

            //perform actions here
            document.querySelector('#button').click();

            //wait for the dynamic element 
            const isPresent = setInterval(function(){
                const nextTarget = document.querySelector('#step_3');
                if (nextTarget){
                    clearInterval(isPresent);   //important to prevent your tour to not iterate until end
                    wt.moveNext();              //go to next step - equivalent to  wt.isPuased = false; wt.next();
                }
            }, 100)
        },

        //dynamically created target element
         {
            element: '#step_3',           
            title: 'Popover title',        
            content: 'Popover content',     
            placement: 'left-start',    
        },
    },
    ...
];

wt.setSteps(steps);
wt.start();

const wt = new WebTour({
    offset: 20,             //distance from popover to target element
    borderRadius: 3,        //popover border radius
    allowClose: true,       //close on click outside
    highlight: true,        //show overlay
    highlightOffset: 5,     //overlay offset from target element
    keyboard: true,         //enable/disable keyboard controll
    width: '300px',         //specify popover's width
    zIndex: 10050,          //specify z-index 
    removeArrow: false,     //show/hide popover arrow
});

wt.start(startIndex = 0)    //start the tour
wt.setSteps(steps)          //requires array of step object { element, title, content, placement } - provide one option
wt.render(step);            //requires step object { element, title, content, placement } - provide one option
wt.next();                  //trigger next action
wt.previous();              //trigger previous
wt.moveNext();              //resume tour and move next
wt.movePrevious();          //resume tour and move previous