TourGuide JS has a range of promise driven methods and callbacks to provide an enjoyable developer experience.
Written entirely in vanilla JS with TypeScript and usable in virtually any framework. Choose from CDN or NPM installation.
Type definitions help automatically detect available options in your IDE as well as ensure a type safe package for your projects.
Tour positioning is supported by Floating-ui. It's required modules are pre-bundled into the TourGuide JS library.
Define an array of options to create the perfect onboarding experience for your visitors, you can even use custom HTML in your tour content.
TourGuide JS is in early stages of development and contribution is welcome. Open license for both commercial and personal use.
$
npm i @sjmc11/tourguidejs
Include in your project
import "@sjmc11/tourguidejs/src/scss/tour.scss" // Styles
import {TourGuideClient} from "@sjmc11/tourguidejs/src/Tour" // JS
Declare steps (data attribute method)
<div data-tg-tour="<span>My first tour</span>"> ... </div>
// Additional attributes can be added to elements.
Initialization
const tg = new TourGuideClient({} : TourGuideOptions)
// Optionally pass options and define steps in object form
Start
tg.start(group? : string)
// Optionally pass 'group' to only include steps with matching [data-tg-group='<group_name>']
{
autoScroll: boolean = true// auto scroll to elements
autoScrollSmooth: boolean = true // auto scroll smooth
autoScrollOffset: number = 20// Offset from edge for smooth scroll
backdropClass: string = ""// additional css class for tour backdrop
backdropColor: string = "rgba(20,20,21,0.84)"// RGBA support only
targetPadding: number = 30// space around highlighted target in px
backdropAnimate: boolean = true// animate backdrop position & size
dialogClass: string = ""// additional css class for tour dialog
dialogZ: number = 999// z-index of dialog
dialogWidth: number = 0// width style property for dialog - recommended if loading images into content
dialogMaxWidth: number = 340// max-width style property for dialog
dialogAnimate: boolean = true// Animate dialog position & size
closeButton: boolean = true// show close button
nextLabel: string = "Next"// text for next button
prevLabel: string = "Back"// text for prev button
finishLabel: string = "Finish"// text for finish button
hidePrev: boolean = false// hide prev button
hideNext: boolean = false// hide next button
completeOnFinish: boolean = true// Set tour as finished in localStorage on finish
showStepDots: boolean = true// show the dots tour progress
stepDotsPlacement: 'footer' | 'body' = "footer"// show dots in dialog body/footer
showButtons: boolean = true// show next/prev buttons
showStepProgress: boolean = true// show `1/5` human-readable step progress
progressBar: string = ""// show progress bar under dialog header - pass a colour string to enable
keyboardControls: boolean =false// show next & prev arrows keys + esc key
exitOnEscape: boolean = true// Close the tour on escape key
exitOnClickOutside: boolean = true// Close the tour on backdrop click
rememberStep: boolean = true// open tour on last active step
debug: boolean = false// show console logging
steps: TourGuideStep[]// pre-define the tour steps
}