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