Docs
Tour Options
Control the appearance and behaviour of the tour.
Declaring options
Options can be set on TourGuide creation as well as using the setOptions() method.
const tg = new TourGuideClient({
dialogClass: 'my-custom-tour-class',
showStepProgress: 'false',
// additional options
})
Available options
Auto scroll browser window to the target element.
Auto scroll browser window to the target element.
When auto scrolling to an element, set the surrounding margin that should be scrolled into view. Defined in pixels.
Apply CSS transition class on backdrop to enable smooth resizing and repositioning on step change.
Add a custom CSS class to the backdrop element.
Use a custom color for the tour backdrop.
Apply CSS transition class on the tour guide element to enable smooth resizing and repositioning on step change
Add a custom CSS class to the tour dialog element.
CSS z-index property of the tour dialog element.
Set a strict width for the dialog in px. Recommended if loading images in the content to maintain precise positioning.
Maximum width for the tour guide dialog.
Floating ui placement for the tour guide dialog. Leave undefined for auto placement.
The space around the highlighted step element in pixels.
Hide the next button
Hide the back button
Button text for the next button.
Button text for the back button.
Button text for the finish button displayed on the last tour guide step.
Use TourGuide JS' in-built handler for detecting when a user has completed a tour using localStorage.
When a user finishes a tour its group key is recorded in a users' browser data. This allows you to use the isFinished() method in your application logic.
If no group is provided and completeOnFinish is set to true, a default group of 'tour' is stored to detect an unnamed tour completion.
Exit the tour on escape key press. Can be used in conjunction with keyboardControls.
Exit the tour on when a user clicks outside the tour.
Support keyboard controls for forwards & backwards arrows as well as escape key.
Show the tour progress marker dots.
Whether to output the step dots in the tour dialog body or centered in the footer.
Display the next and prev buttons. Can be used in conjunction with hideNext & hidePrev.
Show `1/5` human-readable step progress in the tour dialog footer.
// show progress bar under dialog header - pass a colour string to enable
Display the close button in the top-right corner of the tour dialog.
Continue the tour from last active step when re-opening.
Allow the user to click elements within the target highlight area.
Display console logging.