Tour

Tour

Class representing the site tour

Constructor

new Tour(options) → {Tour}

Parameters:
Name Type Description
options Object

The options for the tour

Properties
Name Type Description
confirmCancel boolean | function

If true, will issue a window.confirm before cancelling. If it is a function(support Async Function), it will be called and wait for the return value, and will only be cancelled if the value returned is true
confirmCancelMessage string

The message to display in the window.confirm dialog
classPrefix string

The prefix to add to the shepherd-enabled and shepherd-target class names as well as the data-shepherd-step-id.
defaultStepOptions Object

Default options for Steps (Step#constructor), created through addStep
exitOnEsc boolean

Exiting the tour with the escape key will be enabled unless this is explicitly set to false.
keyboardNavigation boolean

Navigating the tour via left and right arrow keys will be enabled unless this is explicitly set to false.
stepsContainer HTMLElement

An optional container element for the steps. If not set, the steps will be appended to document.body.
modalContainer HTMLElement

An optional container element for the modal. If not set, the modal will be appended to document.body.
steps Array.<object> | Array.<Step>

An array of step options objects or Step instances to initialize the tour with
tourName string

An optional "name" for the tour. This will be appended to the the tour's dynamically generated id property.
useModalOverlay boolean

Whether or not steps should be placed above a darkened modal overlay. If true, the overlay will create an opening around the target element so that it can remain interactive
Source:

Extends

  • Evented

Classes

Tour

Methods

addStep(options, index) → {Step}

Adds a new step to the tour

Parameters:
Name Type Description
options Object | Step

An object containing step options or a Step instance
index number

The optional index to insert the step at. If undefined, the step is added to the end of the array.
Source:

addSteps(steps)

Add multiple steps to the tour

Parameters:
Name Type Description
steps Array.<object> | Array.<Step>

The steps to add to the tour
Source:

back()

Go to the previous step in the tour

Source:

(async) cancel()

Calls _done() triggering the 'cancel' event If confirmCancel is true, will show a window.confirm before cancelling If confirmCancel is a function, will call it and wait for the return value, and only cancel when the value returned is true

Source:

complete()

Calls _done() triggering the complete event

Source:

getById(id) → {Step}

Gets the step from a given id

Parameters:
Name Type Description
id Number | String

The id of the step to retrieve
Source:

getCurrentStep() → {Step|null}

Gets the current step

Source:

hide()

Hide the current step

Source:

isActive() → {boolean}

Check if the tour is active

Source:

next()

Go to the next step in the tour If we are at the end, call complete

Source:

removeStep(name)

Removes the step from the tour

Parameters:
Name Type Description
name String

The id for the step to remove
Source:

show(key, forward)

Show a specific step in the tour

Parameters:
Name Type Default Description
key Number | String 0

The key to look up the step by
forward Boolean true

True if we are going forward, false if backward
Source:

start()

Start the tour

Source: