Skip to content

TourStep Type documentation

extends TourStepCommonOptions
Options for each tour step.
Properties
The element, the step should be attached to on the page.
attachTo?: { element: (string | HTMLElement | () => (string | HTMLElement)) }
A function that returns a promise. When the promise resolves, the next step will be shown. This can be used to 'clean up' action from beforeShowPromise .
beforeNextPromise?: () => Promise<any> from beforeNextPromise
A function that returns a promise. When the promise resolves, the step will be shown. E.g. use this to open dialogs, etc.
beforeShowPromise?: () => Promise<any> from beforeShowPromise
Unique id for the step. Exposed in DOM as data-step-id
id?: string
Alt text for a provided image.
imgAlt?: TranslatableString
CSS class applied to the image.
imgClass?: string
Sets the image object-fit CSS property.
imgObjectFit?: ("fill" | "none" | "contain" | "cover" | "scale-down") = 'scale-down'
Optional image source to display.
imgSrc?: string
Whether Scroll the element into view.
scrollTo?: (boolean | ScrollIntoViewOptions) from scrollTo
Custom handler to perform scrolling.
scrollToHandler?: (element: HTMLElement) => void from scrollToHandler
Body text of the modal.
text?: TranslatableString
Title to be displayed on the modal.
title: TranslatableString

Types Documentation

Common options for tour step and as default for tour step
Properties
A function that returns a promise. When the promise resolves, the next step will be shown. This can be used to 'clean up' action from beforeShowPromise .
beforeNextPromise?: () => Promise<any>
A function that returns a promise. When the promise resolves, the step will be shown. E.g. use this to open dialogs, etc.
beforeShowPromise?: () => Promise<any>
Whether Scroll the element into view.
scrollTo?: (boolean | ScrollIntoViewOptions)
Custom handler to perform scrolling.
scrollToHandler?: (element: HTMLElement) => void
() => Promise<any>
Property
A function that returns a promise. When the promise resolves, the next step will be shown. This can be used to 'clean up' action from beforeShowPromise .
() => Promise<any>
Property
A function that returns a promise. When the promise resolves, the step will be shown. E.g. use this to open dialogs, etc.
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
(boolean | ScrollIntoViewOptions)
Property
Whether Scroll the element into view.
(element: HTMLElement) => void
Property
Custom handler to perform scrolling.

Except where otherwise noted, content on this site is licensed under MIT License.