The Notable Tour library will take the user on a tour of your application.
Notable Tour will highlight different HTMLElements by surrounding the element with a darkened div and providing a text description/instructions for the user to read.
npm i notable-tour
Coming Soon
For each element you would like Notable Tour to highlight, provide a data-tour element with the text you would like displayed:
<span data-tour="This is text notable tour will display">Highlighted Text Here</span>
Pass an object that overrides any of these values to customize the look of the tour:
let config = {
backgroundColor: 'black',
color: '#ffffff',
opacity: .8,
className: 'notable-tour',
buttons: {
next: {
classes: ["btn", "btn-primary"]
},
previous: {
classes: ["btn", "btn-primary"]
},
end: {
classes: ["btn", "btn-primary"]
},
},
theme : 'light'
};
tour.start(config);
Themes include:
- light
- dark
- elegant
- fantasy
- robot
import tour from 'notable-tour';
class SomeComponent {
public doTour() {
tour();
}
}
<button (click)="doTour()">Start Tour</button>