A light-weight user's step-by-step guide for your website using Vanilla JS.
npm install webtourdist directory.
html
`
Basic usage and Demo
$3
`javascript
const wt = new WebTour();
wt.highlight('#target');
`
$3
`javascript
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();
`
$3
WebTour has onNext and onPrevious actions.
`javascript
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();
`
$3
`javascript
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
});
`
$3
`javascript
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
``