1.1.0 • Published 3 years ago
notable-tour v1.1.0
About
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.
Install
npm i notable-tour
Example
Coming Soon
Instructions
The HTML
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>
Config
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 (React?/Angular?)
import tour from 'notable-tour';
class SomeComponent {
public doTour() {
tour();
}
}
<button (click)="doTour()">Start Tour</button>