Step

Step

A class representing steps to be added to a tour.

Constructor

new Step(tour, options) → {Step}

Create a step

Parameters:
Name Type Description
tour Tour

The tour for the step

options Object

The options for the step

Properties
Name Type Description
arrow Object

Whether to display the arrow for the tooltip or not.

attachTo Object

What element the step should be attached to on the page. It should be an object with the properties element and on, where element is an element selector string or a DOM element and on is the optional direction to place the Tippy tooltip.

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

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.

Properties
Name Type Description
element HTMLElement | string
on string
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 new Step(tour, {
  advanceOn: { selector: '.some .selector-path', event: 'click' },
  ...moreOptions
})'

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 myTour.next().

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.

Properties
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 this.next will work inside the action. You can use action to skip steps or navigate to specific steps, with something like:

action() {
  return this.show('some_step_name');
}
button.classes string

Extra classes to apply to the <a>

button.secondary boolean

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

button.text string

The HTML text of the button

button.disabled boolean

Should the button be disabled?

button.label string

The aria-label 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

Properties
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.

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.

tetherOptions string

Extra options to pass to tether

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);
  }
}
modalOverlayOpeningPadding Number

An amount of padding to add around the modal overlay opening

Source:

Extends

  • Evented

Classes

Step

Methods

cancel()

Cancel the tour Triggers the cancel event

Source:

complete()

Complete the tour Triggers the complete event

Source:

destroy()

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

Source:

getTour() → {Tour}

Returns the tour for the step

Source:

hide()

Hide the step

Source:

isOpen() → {boolean}

Check if the step is open and visible

Source:

show() → {*|Promise}

Wraps _show and ensures beforeShowPromise resolves before calling show

Source:

updateStepOptions(options)

Updates the options of the step.

Parameters:
Name Type Description
options Object

The options for the step

Source: