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:

Highlighted Text Here

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();
}
}

Start Tour
``