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 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' },
  ...moreOptions
});

If you don’t specify an attachTo the element will appear in the middle of the screen. The same will happen if your attachTo.element callback returns null, undefined, or a selector that does not exist in the DOM. 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. If the element to highlight does not yet exist while instantiating tour steps, you may use lazy evaluation by supplying a function to attachTo.element. The function will be called in the before-show phase.

Properties
Name Type Description
element string | HTMLElement | function

An element selector string, DOM element, or a function (returning a selector, a DOM element, null or undefined).

on string

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

  • Possible string values: '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' },
  ...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.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

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.

modalOverlayOpeningPadding number

An amount of padding to add around the modal overlay opening

modalOverlayOpeningRadius number | Object

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

floatingUIOptions object

Extra options to pass to FloatingUI

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);
  }
}
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 FloatingUI instance for the step. Triggers destroy event

Source:

getElement() → {HTMLElement|null|undefined}

Returns the element for the step

Source:

getTarget() → {HTMLElement|null|undefined}

Returns the target for the step

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: