TourGuide Icon TourGuide JS
Docs

Events

Integrate your own behaviours when events occur.

Declaring events

Event methods can optionally return a promise if you would like to explicitly accept and reject events. By default, event methods are handled asynchronously so blocking functions will be waited on before continuing.

const tg = new TourGuideClient()
tg.onFinish(async ()=>{ // prevent showing alert if already finished tour if(!tg.isFinished()){ alert('Tour complete, you are ready to use the application.') } })
tg.start()

onFinish()

#

Accepts a function to perform before finishing the tour.

Triggered by clicking the 'finish' button displayed on the last tour step.

tg.onFinish(()=>{ return new Promise((resolve) => { if (confirm('Would you like to start the tour again?')) { // use refreshDialog() instead of visitStep() to avoid re-triggering events tg.activeStep = 0 tg.refreshDialog() } else { return resolve(true) } }) })

onBeforeExit()

#

Accepts a function to perform before a user exits the tour.

Triggered by clicking outside dialog, escape key or close button.

tg.onBeforeExit(()=>{ return new Promise((resolve, reject) => { if (confirm('Are you sure you want to close the tour?')) { return resolve(true) } else { return reject() } }) })

onAfterExit()

#

Accepts a function to perform after the tour has been exited.

*Accepts but does not handle a promise based function as there is no more user interaction with the tour until re-started.

tg.onAfterExit(()=>{ console.info("The tour has closed") })

onBeforeStepChange()

#

Accepts a function to perform before a user changes tour step.

tg.onBeforeStepChange(()=>{ return new Promise((resolve, reject) => { if (confirm('Change tour step?')) { return resolve(true) } else { return reject() } }) })

onAfterStepChange()

#

Accepts a function to perform after a user changes tour step.

tg.onAfterStepChange(()=>{ console.info("step change complete") })