Class Tour

Intro.js Tour class

Implements

Package<TourOptions>

Constructors

constructor

new Tour(
elementOrSelector?: string | HTMLElement,
options?: Partial<TourOptions>,
): Tour
Create a new Tour instance
Parameters
- OptionalelementOrSelector: string | HTMLElement
  Optional target element or CSS query to start the Tour on
- Optionaloptions: Partial<TourOptions>
  Optional Tour options
Returns Tour
- Defined in src/packages/tour/tour.ts:59

Methods

addStep

addStep(step: Partial<TourStep>): Tour
Add a step to the tour options. This method should be used in conjunction with the start() method.
Parameters
- step: Partial<TourStep>
  step to add
Returns Tour
- Defined in src/packages/tour/tour.ts:119

addSteps

addSteps(steps: Partial<TourStep>[]): Tour
Add multiple steps to the tour options. This method should be used in conjunction with the start() method.
Parameters
- steps: Partial<TourStep>[]
  steps to add
Returns Tour
- Defined in src/packages/tour/tour.ts:134

appendFloatingElement

appendFloatingElement(): Element
Append the floating element to the target element. Floating element is a helper element that is used when the step does not have a target element. For internal use only.

Returns Element
- Defined in src/packages/tour/tour.ts:409

callback

callback<
    K extends
        | "beforeChange"
        | "change"
        | "afterChange"
        | "complete"
        | "start"
        | "exit"
        | "skip"
        | "beforeExit",
>(
    callbackName: K,
):
    | undefined
    | {
        afterChange?: introAfterChangeCallback;
        beforeChange?: introBeforeChangeCallback;
        beforeExit?: introBeforeExitCallback;
        change?: introChangeCallback;
        complete?: introCompleteCallback;
        exit?: introExitCallback;
        skip?: introSkipCallback;
        start?: introStartCallback;
    }[K]
Get a specific callback function
Type Parameters
- K extends
      | "beforeChange"
      | "change"
      | "afterChange"
      | "complete"
      | "start"
      | "exit"
      | "skip"
      | "beforeExit"
Parameters
- callbackName: K
  callback name
Returns
    | undefined
    | {
        afterChange?: introAfterChangeCallback;
        beforeChange?: introBeforeChangeCallback;
        beforeExit?: introBeforeExitCallback;
        change?: introChangeCallback;
        complete?: introCompleteCallback;
        exit?: introExitCallback;
        skip?: introSkipCallback;
        start?: introStartCallback;
    }[K]
- Defined in src/packages/tour/tour.ts:73

clone

clone(): ThisType<Tour>
Clone the current tour instance

Returns ThisType<Tour>
Implementation of Package.clone
- Defined in src/packages/tour/tour.ts:321

currentStep

currentStep(): undefined | number
Returns undefined | number
Deprecated
currentStep() is deprecated, please use getCurrentStep() instead.
- Defined in src/packages/tour/tour.ts:194

decrementCurrentStep

decrementCurrentStep(): this
Decrement the current step of the tour (does not start the tour step, must be in conjunction with previousStep)

Returns this
- Defined in src/packages/tour/tour.ts:237

disableKeyboardNavigation

disableKeyboardNavigation(): Tour
Disable keyboard navigation for the tour

Returns Tour
- Defined in src/packages/tour/tour.ts:377

disableRefreshOnResize

disableRefreshOnResize(): void
Disable refresh on window resize for the tour

Returns void
- Defined in src/packages/tour/tour.ts:397

enableKeyboardNavigation

enableKeyboardNavigation(): Tour
Enable keyboard navigation for the tour

Returns Tour
- Defined in src/packages/tour/tour.ts:364

enableRefreshOnResize

enableRefreshOnResize(): void
Enable refresh on window resize for the tour

Returns void
- Defined in src/packages/tour/tour.ts:389

exit

exit(force?: boolean): Promise<Tour>
Exit the tour
Parameters
- Optionalforce: boolean
  whether to force exit the tour
Returns Promise<Tour>
- Defined in src/packages/tour/tour.ts:460

getCurrentStep

getCurrentStep(): undefined | number
Get the current step of the tour

Returns undefined | number
- Defined in src/packages/tour/tour.ts:187

getCurrentStepSignal

getCurrentStepSignal(): State<undefined | number>
Returns the underlying state of the current step This is an internal method and should not be used outside of the package.

Returns State<undefined | number>
- Defined in src/packages/tour/tour.ts:172

getDirection

getDirection(): "forward" | "backward"
Get the direction of the tour (forward or backward)

Returns "forward" | "backward"
- Defined in src/packages/tour/tour.ts:249

getOption

getOption<K extends keyof TourOptions>(key: K): TourOptions[K]
Get a specific option for the tour
Type Parameters
- K extends keyof TourOptions
Parameters
- key: K
  option key
Returns TourOptions[K]
Implementation of Package.getOption
- Defined in src/packages/tour/tour.ts:314

getRefreshesSignal

getRefreshesSignal(): State<number>
Returns the underlying state of the refreshes This is an internal method and should not be used outside of the package.

Returns State<number>
- Defined in src/packages/tour/tour.ts:180

getStep

getStep(step: number): TourStep
Get a specific step of the tour
Parameters
- step: number
  step number
Returns TourStep
- Defined in src/packages/tour/tour.ts:164

getSteps

getSteps(): TourStep[]
Get all available steps of the tour

Returns TourStep[]
- Defined in src/packages/tour/tour.ts:156

getTargetElement

getTargetElement(): HTMLElement
Get the target element of the tour

Returns HTMLElement
- Defined in src/packages/tour/tour.ts:287

goToStep

goToStep(step: number): Promise<Tour>
Go to a specific step of the tour
Parameters
- step: number
  step number
Returns Promise<Tour>
- Defined in src/packages/tour/tour.ts:87

goToStepNumber

goToStepNumber(stepNumber: number): Promise<Tour>
Go to a specific step of the tour with the explicit [data-step] number
Parameters
- stepNumber: number
  [data-step] value of the step
Returns Promise<Tour>
- Defined in src/packages/tour/tour.ts:98

hasStarted

hasStarted(): boolean
Returns true if the tour has started

Returns boolean
- Defined in src/packages/tour/tour.ts:342

incrementCurrentStep

incrementCurrentStep(): this
Increment the current step of the tour (does not start the tour step, must be called in conjunction with nextStep)

Returns this
- Defined in src/packages/tour/tour.ts:223

isActive

isActive(): boolean
Returns true if the tour instance is active

Returns boolean
Implementation of Package.isActive
- Defined in src/packages/tour/tour.ts:328

isEnd

isEnd(): boolean
Check if the current step is the last step

Returns boolean
- Defined in src/packages/tour/tour.ts:272

isLastStep

isLastStep(): boolean
Check if the current step is the last step of the tour

Returns boolean
- Defined in src/packages/tour/tour.ts:280

nextStep

nextStep(): Promise<Tour>
Go to the next step of the tour

Returns Promise<Tour>
- Defined in src/packages/tour/tour.ts:256

onafterchange

onafterchange(callback: introAfterChangeCallback): void
Parameters
- callback: introAfterChangeCallback
Returns void
Deprecated
onafterchange is deprecated, please use onAfterChange instead.
- Defined in src/packages/tour/tour.ts:538

onAfterChange

onAfterChange(callback: introAfterChangeCallback): Tour
Add a callback to be called after the tour changes steps
Parameters
- callback: introAfterChangeCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:546

onbeforechange

onbeforechange(callback: introBeforeChangeCallback): Tour
Parameters
- callback: introBeforeChangeCallback
Returns Tour
Deprecated
onbeforechange is deprecated, please use onBeforeChange instead.
- Defined in src/packages/tour/tour.ts:496

onBeforeChange

onBeforeChange(callback: introBeforeChangeCallback): Tour
Add a callback to be called before the tour changes steps
Parameters
- callback: introBeforeChangeCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:504

onbeforeexit

onbeforeexit(callback: introBeforeExitCallback): Tour
Parameters
- callback: introBeforeExitCallback
Returns Tour
Deprecated
onbeforeexit is deprecated, please use onBeforeExit instead.
- Defined in src/packages/tour/tour.ts:638

onBeforeExit

onBeforeExit(callback: introBeforeExitCallback): Tour
Add a callback to be called before the tour is exited
Parameters
- callback: introBeforeExitCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:646

onchange

onchange(callback: introChangeCallback): void
Parameters
- callback: introChangeCallback
Returns void
Deprecated
onchange is deprecated, please use onChange instead.
- Defined in src/packages/tour/tour.ts:518

onChange

onChange(callback: introChangeCallback): Tour
Add a callback to be called when the tour changes steps
Parameters
- callback: introChangeCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:526

oncomplete

oncomplete(callback: introCompleteCallback): Tour
Parameters
- callback: introCompleteCallback
Returns Tour
Deprecated
oncomplete is deprecated, please use onComplete instead.
- Defined in src/packages/tour/tour.ts:558

onComplete

onComplete(callback: introCompleteCallback): Tour
Add a callback to be called when the tour is completed
Parameters
- callback: introCompleteCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:566

onexit

onexit(callback: introExitCallback): Tour
Parameters
- callback: introExitCallback
Returns Tour
Deprecated
onexit is deprecated, please use onExit instead.
- Defined in src/packages/tour/tour.ts:598

onExit

onExit(callback: introExitCallback): Tour
Add a callback to be called when the tour is exited
Parameters
- callback: introExitCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:606

onskip

onskip(callback: introSkipCallback): Tour
Parameters
- callback: introSkipCallback
Returns Tour
Deprecated
onskip is deprecated, please use onSkip instead.
- Defined in src/packages/tour/tour.ts:618

onSkip

onSkip(callback: introSkipCallback): Tour
Add a callback to be called when the tour is skipped
Parameters
- callback: introSkipCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:626

onstart

onstart(callback: introStartCallback): Tour
Parameters
- callback: introStartCallback
Returns Tour
Deprecated
onstart is deprecated, please use onStart instead.
- Defined in src/packages/tour/tour.ts:578

onStart

onStart(callback: introStartCallback): Tour
Add a callback to be called when the tour is started
Parameters
- callback: introStartCallback
  callback function to be called
Returns Tour
- Defined in src/packages/tour/tour.ts:586

previousStep

previousStep(): Promise<Tour>
Go to the previous step of the tour

Returns Promise<Tour>
- Defined in src/packages/tour/tour.ts:264

refresh

refresh(refreshSteps?: boolean): Tour
Refresh the tour
Parameters
- OptionalrefreshSteps: boolean
  whether to refresh the tour steps
Returns Tour
- Defined in src/packages/tour/tour.ts:473

resetCurrentStep

resetCurrentStep(): void
Returns void
- Defined in src/packages/tour/tour.ts:198

setCurrentStep

setCurrentStep(step: number): this
Set the current step of the tour and the direction of the tour
Parameters
- step: number
Returns this
- Defined in src/packages/tour/tour.ts:206

setDontShowAgain

setDontShowAgain(dontShowAgain: boolean): Tour
Set the dontShowAgain option for the tour so that the tour does not show twice to the same user This is a persistent option that is stored in the browser's cookies
Parameters
- dontShowAgain: boolean
  boolean value to set the dontShowAgain option
Returns Tour
- Defined in src/packages/tour/tour.ts:352

setOption

setOption<K extends keyof TourOptions>(key: K, value: TourOptions[K]): this
Set a specific option for the tour
Type Parameters
- K extends keyof TourOptions
Parameters
- key: K
  option key
- value: TourOptions[K]
  option value
Returns this
Implementation of Package.setOption
- Defined in src/packages/tour/tour.ts:305

setOptions

setOptions(partialOptions: Partial<TourOptions>): this
Set the options for the tour
Parameters
- partialOptions: Partial<TourOptions>
  key/value pair of options
Returns this
Implementation of Package.setOptions
- Defined in src/packages/tour/tour.ts:295

setSteps

setSteps(steps: TourStep[]): this
Set the steps of the tour
Parameters
- steps: TourStep[]
  steps to set
Returns this
- Defined in src/packages/tour/tour.ts:148

start

start(): Promise<Tour>
Starts the tour and shows the first step

Returns Promise<Tour>
- Defined in src/packages/tour/tour.ts:446

Class Tour

Implements

Index

Constructors

Methods

Constructors

constructor

Parameters

Returns Tour

Methods

addStep

Parameters

Returns Tour

addSteps

Parameters

Returns Tour

appendFloatingElement

Returns Element

callback

Type Parameters

Parameters

Returns | undefined | { afterChange?: introAfterChangeCallback; beforeChange?: introBeforeChangeCallback; beforeExit?: introBeforeExitCallback; change?: introChangeCallback; complete?: introCompleteCallback; exit?: introExitCallback; skip?: introSkipCallback; start?: introStartCallback; }[K]

clone

Returns ThisType<Tour>

currentStep

Returns undefined | number

Deprecated

decrementCurrentStep

Returns this

disableKeyboardNavigation

Returns Tour

disableRefreshOnResize

Returns void

enableKeyboardNavigation

Returns Tour

enableRefreshOnResize

Returns void

exit

Parameters

Returns Promise<Tour>

getCurrentStep

Returns undefined | number

getCurrentStepSignal

Returns State<undefined | number>

getDirection

Returns "forward" | "backward"

getOption

Type Parameters

Parameters

Returns TourOptions[K]

getRefreshesSignal

Returns State<number>

getStep

Parameters

Returns TourStep

getSteps

Returns TourStep[]

getTargetElement

Returns HTMLElement

goToStep

Parameters

Returns Promise<Tour>

goToStepNumber

Parameters

Returns Promise<Tour>

hasStarted

Returns boolean

incrementCurrentStep

Returns this

isActive

Returns boolean

isEnd

Returns boolean

isLastStep

Returns boolean

nextStep

Returns Promise<Tour>

onafterchange

Parameters

Returns void

Returns
| undefined
| {
afterChange?: introAfterChangeCallback;
beforeChange?: introBeforeChangeCallback;
beforeExit?: introBeforeExitCallback;
change?: introChangeCallback;
complete?: introCompleteCallback;
exit?: introExitCallback;
skip?: introSkipCallback;
start?: introStartCallback;
}[K]