Though it's not a must, it's best if the element you want to highlight won't have siblings
Example:
const wt = new Walkthrough();
let steps = [] as Array<TutorialStage>;
steps.push({
title: 'feature',
desc: 'feature description . . .',
selector: '.feature'
});
steps.push({
title: 'feature 2',
desc: 'second feature description . . .',
selector: '.feature',
selectorIndex: 1,
fixPadding: true
});
steps.push({
desc: 'third feature description . . .',
element: document.getElementById('feature-3'),
fixMargin: true
});
let options = new TutorialOptions(); // optional
options.identifier = 'my_page_name'; // the walkthrough uniq id
options.maxIdentifier = 1; // the max number of times that this uniq walkthrough will run
for this user (default is 1)
wt.setTutorial(steps, options).subscribe(
() => {
alert('Walkthrough Done!');
}
);
TutorialOptions:
export class TutorialOptions {
public identifier?: string;
public maxIdentifier?: number;
constructor() {
this.maxIdentifier = 1;
}
}
TutorialStage:
export interface TutorialStage {
title?: string;
desc: string;
selector?: string;
selectorIndex?: number;
element?: HTMLElement;
autoread?: boolean;
fixMargin?: boolean;
fixPadding?: boolean;
top?: string;
left?: string;
onEnter?: Function;
onExit?: Function;
}
Best Practices:
Isolate the element
Use
fixMargin and fixPadding
In cases things aren't looking good in terms of elements overflowing out of the tutorial border try to use
fixMargin: true or fixPadding: true
Locate the prompt manually
The prompt location is being determined automatically. You can override this behaviour by adding
top: '-50px' and left: '30px'Usage:
npm i walkthrough-js --save
include script:
<script type="text/javascript" src="node_modules/walkthrough-js/dist/walkthrough.bundle.js"></script>
or with ES6:
import { Walkthrough } from "walkthrough-js/dist/walkthrough";
import { TutorialStage } from 'walkthrough-js/dist/interface';
initialize component:
const wt = new Walkthrough();
let steps = [];
// define steps . . .
wt.setTutorial(steps);