A class representing steps to be added to a tour.


new Step(tour, options) → {Step}

Create a step

Name Type Description
tour Tour

The tour for the step

options object

The options for the step

Name Type Description
arrow boolean

Whether to display the arrow for the tooltip or not. Defaults to true.

attachTo object

The element the step should be attached to on the page. An object with properties element and on.

const step = new Step(tour, {
  attachTo: { element: '.some .selector-path', on: 'left' },

If you don’t specify an attachTo the element will appear in the middle of the screen. If you omit the on portion of attachTo, the element will still be highlighted, but the tooltip will appear in the middle of the screen, without an arrow pointing to the target.

Name Type Description
element HTMLElement | string

An element selector string or a DOM element.

on string

The optional direction to place the Popper tooltip relative to the element.

  • Possible string values: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'
advanceOn Object

An action on the page which should advance shepherd to the next step. It should be an object with a string selector and an event name

const step = new Step(tour, {
  advanceOn: { selector: '.some .selector-path', event: 'click' },

event doesn’t have to be an event inside the tour, it can be any event fired on any element on the page. You can also always manually advance the Tour by calling

beforeShowPromise function

A function that returns a promise. When the promise resolves, the rest of the show code for the step will execute.

buttons Array.<Object>

An array of buttons to add to the step. These will be rendered in a footer below the main body text.

Name Type Description
button.action function

A function executed when the button is clicked on. It is automatically bound to the tour the step is associated with, so things like will work inside the action. You can use action to skip steps or navigate to specific steps, with something like:

action() {
button.classes string

Extra classes to apply to the <a>

button.disabled boolean

Should the button be disabled?

button.label string

The aria-label text of the button

button.secondary boolean

If true, a shepherd-button-secondary class is applied to the button

button.text string

The HTML text of the button

canClickTarget boolean

A boolean, that when set to false, will set pointer-events: none on the target

cancelIcon object

Options for the cancel icon

Name Type Description
enabled boolean

Should a cancel “✕” be shown in the header of the step?

label string

The label to add for aria-label

classes string

A string of extra classes to add to the step's content element.

highlightClass string

An extra class to apply to the attachTo element when it is highlighted (that is, when its step is active). You can then target that selector in your CSS.

id string

The string to use as the id for the step.

modalOverlayOpeningPadding number

An amount of padding to add around the modal overlay opening

modalOverlayOpeningRadius number

An amount of border radius to add around the modal overlay opening

popperOptions object

Extra options to pass to Popper

scrollTo boolean | Object

Should the element be scrolled to when this step is shown? If true, uses the default scrollIntoView, if an object, passes that object as the params to scrollIntoView i.e. {behavior: 'smooth', block: 'center'}

scrollToHandler function

A function that lets you override the default scrollTo behavior and define a custom action to do the scrolling, and possibly other logic.

showOn function

A function that, when it returns true, will show the step. If it returns false, the step will be skipped.

text string

The text in the body of the step. It can be one of three types:

- HTML string
- `HTMLElement` object
- `Function` to be executed when the step is built. It must return one the two options above.
title string

The step's title. It becomes an h3 at the top of the step. It can be one of two types:

- HTML string
- `Function` to be executed when the step is built. It must return HTML string.
when object

You can define show, hide, etc events inside when. For example:

when: {
  show: function() {
    window.scrollTo(0, 0);


  • Evented





Cancel the tour Triggers the cancel event



Complete the tour Triggers the complete event



Remove the step, delete the step's element, and destroy the Popper instance for the step. Triggers destroy event


getElement() → {HTMLElement|null|undefined}

Returns the element for the step


getTarget() → {HTMLElement|null|undefined}

Returns the target for the step


getTour() → {Tour}

Returns the tour for the step



Hide the step


isCentered() → {boolean}

Checks if the step should be centered or not


isOpen() → {boolean}

Check if the step is open and visible


show() → {*|Promise}

Wraps _show and ensures beforeShowPromise resolves before calling show



Updates the options of the step.

Name Type Description
options Object

The options for the step