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
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
step.ts:62
arrow?
optional
arrow:boolean
Whether to display the arrow for the tooltip or not
Defined in
step.ts:67
attachTo?
optional
attachTo:StepOptionsAttachTo
The element the step should be attached to on the page.
An object with properties element
and on
.
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
step.ts:48
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
step.ts:73
buttons?
optional
buttons: readonlyStepOptionsButton
[]
An array of buttons to add to the step. These will be rendered in a footer below the main body text.
Defined in
step.ts:79
cancelIcon?
optional
cancelIcon:StepOptionsCancelIcon
Should a cancel “✕” be shown in the header of the step?
Defined in
step.ts:84
canClickTarget?
optional
canClickTarget:boolean
A boolean, that when set to false, will set pointer-events: none
on the target.
Defined in
step.ts:89
classes?
optional
classes:string
A string of extra classes to add to the step’s content element.
Defined in
step.ts:94
floatingUIOptions?
optional
floatingUIOptions:object
Extra [options to pass to FloatingUI]https://floating-ui.com/docs/tutorial/
Defined in
step.ts:137
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
step.ts:100
id?
optional
id:string
The string to use as the id
for the step.
Defined in
step.ts:105
modalOverlayOpeningPadding?
optional
modalOverlayOpeningPadding:number
An amount of padding to add around the modal overlay opening
Defined in
step.ts:110
modalOverlayOpeningRadius?
optional
modalOverlayOpeningRadius:number
|object
An amount of border radius to add around the modal overlay opening
Defined in
step.ts:115
modalOverlayOpeningXOffset?
optional
modalOverlayOpeningXOffset:number
An amount to offset the modal overlay opening in the x-direction
Defined in
step.ts:127
modalOverlayOpeningYOffset?
optional
modalOverlayOpeningYOffset:number
An amount to offset the modal overlay opening in the y-direction
Defined in
step.ts:132
scrollTo?
optional
scrollTo:boolean
|ScrollIntoViewOptions
Should the element be scrolled to when this step is shown?
Defined in
step.ts:142
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
step.ts:148
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
step.ts:154
text?
optional
text:StepText
The text in the body of the step. It can be one of four types:
Defined in
step.ts:165
title?
optional
title:StringOrStringFunction
The step’s title. It becomes an h3
at the top of the step.
Defined in
step.ts:174
when?
optional
when:StepOptionsWhen
You can define show
, hide
, etc events inside when
. For example:
Defined in
step.ts:186