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)), on: ModalPosition }
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
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.
(boolean | ScrollIntoViewOptions)
Property
Whether Scroll the element into view.
(element: HTMLElement) => void
Property
Custom handler to perform scrolling.
(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.
Translatable
import
("top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end")
The position of the modal dialog with respect to the highlighted element.
Deprecated: this has no effect, position is automatic

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