Skip to content
Documentation

StepOptions

The options for the step

Properties

advanceOn?

optional advanceOn: StepOptionsAdvanceOn

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:68

arrow?

optional arrow: boolean | StepOptionsArrow

Whether to display the arrow for the tooltip or not, or options for the arrow.

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:73

attachTo?

optional attachTo: StepOptionsAttachTo

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:54

beforeShowPromise()?

optional beforeShowPromise: () => Promise<unknown>

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

Returns

Promise<unknown>

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:79

buttons?

optional buttons: readonly StepOptionsButton[]

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:85

cancelIcon?

optional cancelIcon: StepOptionsCancelIcon

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:90

canClickTarget?

optional canClickTarget: boolean

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:95

classes?

optional classes: string

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:100

extraHighlights?

optional extraHighlights: readonly string[]

An array of extra element selectors to highlight when the overlay is shown The tooltip won’t be fixed to these elements, but they will be highlighted just like the attachTo element.

const step = new Step(tour, {
  extraHighlights: [ '.pricing', '#docs' ],
  ...moreOptions
});

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:113

floatingUIOptions?

optional floatingUIOptions: object

Extra [options to pass to FloatingUI]https://floating-ui.com/docs/tutorial/

middleware?

optional middleware: (undefined | null | false | object)[]

Array of middleware objects to modify the positioning or provide data for rendering.

placement?

optional placement: Placement

Where to place the floating element relative to the reference element.

platform?

optional platform: Platform

Custom or extended platform object.

strategy?

optional strategy: Strategy

The strategy to use when positioning the floating element.

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:156

highlightClass?

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:119

id?

optional id: string

The string to use as the id for the step.

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:124

modalOverlayOpeningPadding?

optional modalOverlayOpeningPadding: number

An amount of padding to add around the modal overlay opening

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:129

modalOverlayOpeningRadius?

optional modalOverlayOpeningRadius: number | object

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:134

modalOverlayOpeningXOffset?

optional modalOverlayOpeningXOffset: number

An amount to offset the modal overlay opening in the x-direction

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:146

modalOverlayOpeningYOffset?

optional modalOverlayOpeningYOffset: number

An amount to offset the modal overlay opening in the y-direction

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:151

scrollTo?

optional scrollTo: boolean | ScrollIntoViewOptions

Should the element be scrolled to when this step is shown?

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:161

scrollToHandler()?

optional scrollToHandler: (element) => void

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

Parameters

• element: HTMLElement

Returns

void

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:167

showOn()?

optional showOn: () => boolean

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

Returns

boolean

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:173

text?

optional text: StepText

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

- HTML string
- Array of HTML strings
- `HTMLElement` object
- `Function` to be executed when the step is built. It must return one of the three options above.

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:184

title?

optional title: StringOrStringFunction

The step’s title. It becomes an h3 at the top of the step.

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:193

when?

optional when: StepOptionsWhen

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

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

Defined in

docs-src/node_modules/shepherd.js/src/step.ts:205