Docs
Methods
In-built functions for working with a TourGuide JS object.
start(group : string)
#Returns a Promise
Starts the tour instance. Accepts a group parameter as a string.
If a group is passed two things happen:
- Only steps with matching [data-tg-group] attribute or group from object will be used in the tour.
- If the completeOnFinish option is enabled the group will be used as a key in localstorage for the isFinished() method.
tg.start('nav').then(()=>{
console.log('started tour of the application nav bar')
})
visitStep(step : "next" | "prev" | number)
#Returns a Promise
Navigates to a tour step.
This will trigger events such as onStepChange()
tg.visitStep(3).then(()=>{
console.log('started tour of the application nav bar')
})
tg.visitStep('next')
tg.visitStep('prev')
nextStep()
#Returns a Promise
Navigates to the next tour guide step.
tg.nextStep()
prevStep()
#Returns a Promise
Navigates to the previous tour guide step.
tg.prevStep()
exit()
#Returns a Promise
Exits the Tour.
tg.exit().then(()=>{
console.log('tour closed')
})
finishTour(exit : booleangroup : string)
#Returns a Promise
Provides a way to programmatically records a tour as complete in users localStorage.
If completeOnFinish options is false this method is void.
Pass a 'group' to set a specific set of tour steps as complete, otherwise the general key of 'tour' is applied for ungrouped tour steps.
tg.finish().then(()=>{
console.log('tour closed')
})
isFinished(group : string)
#Returns a boolean value
Query if a user has completed a specific set of tour steps.
Leave group blank to check if user has completed an unnamed group of steps.
const tourTrigger = document.getElementById('tourTrigger');
if(!tg.isFinished('nav-tour') && tourTrigger){
tourTrigger.classList.add('pulse-animated')
}
deleteFinishedTour(group : string)
#No return value
Remove a group key from the record of completed tours from localStorage.
Leave blank or pass 'tours' to remove recorded completion of un-named steps.
tg.deleteFinishedTour('nav-tour')
refresh()
#Returns a promise
Refresh all properties and elements of the tour. This includes re-computing tour steps.
This is useful when injecting new elements with the [data-tg-tour] attribute into the DOM without re-starting an active tour.
tg.deleteFinishedTour('nav-tour')
refreshDialog()
#Returns a promise
Refresh only the dialog, this includes its content and positioning.
Unlike refresh() it does not re-compute the steps of the tour.
This is useful when you would like to manipulate the HTML of a tour while it is active.
if(tg.tourSteps[0]) tg.tourSteps[0].title = "Updated step title"
if(tg.tourSteps[0]) tg.tourSteps[0].content = ""
tg.activeStep = 0
tg.refreshDialog()
// Using refresh() would recompute tour steps and override the customizations
updatePositions()
#Returns a promise
Re-calculate the size and positioning of the backdrop and dialog elements.
This is useful when you need to re-position the tour after manipulating content with other methods.
const stepWithImg = {
title: "Welcome to tour guide JS",
target: undefined,
order: 6,
content: "<img src='https://media2.giphy.com/media/axu6dFuca4HKM/giphy.gif?cid=790b76116cda53c45dac6381787fa420167338528a9a9abb&rid=giphy.gif&ct=g'/>",
group: "demo-tour",
afterEnter: async () => {
return new Promise(async (resolve) => {
await tg.updatePositions()
return resolve(true)
})
}
}
tg.addSteps([stepWithImg])
setOptions()
#Returns a promise
Programmatically set the tour guide options.
tg.setOptions({
prevLabel: "Back it up"
nextLabel: "Forwards"
stepDotsPlacement: "footer"
})
Back
Events