TourGuide Icon TourGuide JS
Docs

Tour Options

Control the appearance and behaviour of the tour.

Declaring options

Options can be set on TourGuide creation as well as using the setOptions() method.

const tg = new TourGuideClient({

dialogClass: 'my-custom-tour-class',

showStepProgress: 'false',

// additional options

})

Available options

autoScroll

# Type: boolean Default: true

Auto scroll browser window to the target element.

autoScrollSmooth

# Type: boolean Default: true

Auto scroll browser window to the target element.

autoScrollOffset

# Type: number Default: 20

When auto scrolling to an element, set the surrounding margin that should be scrolled into view. Defined in pixels.

backdropAnimate

# Type: boolean Default: true

Apply CSS transition class on backdrop to enable smooth resizing and repositioning on step change.

backdropClass

# Type: string Default: undefined

Add a custom CSS class to the backdrop element.

backdropColor

# Type: string Default: rgba(20,20,21,0.84)

Use a custom color for the tour backdrop.

dialogAnimate

# Type: string Default: undefined

Apply CSS transition class on the tour guide element to enable smooth resizing and repositioning on step change

dialogClass

# Type: string Default: undefined

Add a custom CSS class to the tour dialog element.

dialogZ

# Type: number Default: 999

CSS z-index property of the tour dialog element.

dialogWidth

# Type: number Default: undefined

Set a strict width for the dialog in px. Recommended if loading images in the content to maintain precise positioning.

dialogMaxWidth

# Type: number Default: 340

Maximum width for the tour guide dialog.

dialogPlacement

# Type: 'top' | 'right' | 'bottom' | 'left' | undefined Default: undefined

Floating ui placement for the tour guide dialog. Leave undefined for auto placement.

targetPadding

# Type: 'top' | 'right' | 'bottom' | 'left' | undefined Default: undefined

The space around the highlighted step element in pixels.

hideNext

# Type: boolean Default: false

Hide the next button

hidePrev

# Type: boolean Default: false

Hide the back button

nextLabel

# Type: string Default: Next

Button text for the next button.

prevLabel

# Type: string Default: Back

Button text for the back button.

finishLabel

# Type: string Default: Finish

Button text for the finish button displayed on the last tour guide step.

completeOnFinish

# Type: boolean Default: true

Use TourGuide JS' in-built handler for detecting when a user has completed a tour using localStorage.

When a user finishes a tour its group key is recorded in a users' browser data. This allows you to use the isFinished() method in your application logic.

If no group is provided and completeOnFinish is set to true, a default group of 'tour' is stored to detect an unnamed tour completion.

exitOnEscape

# Type: boolean Default: true

Exit the tour on escape key press. Can be used in conjunction with keyboardControls.

exitOnClickOutside

# Type: boolean Default: true

Exit the tour on when a user clicks outside the tour.

keyboardControls

# Type: boolean Default: true

Support keyboard controls for forwards & backwards arrows as well as escape key.

showStepDots

# Type: boolean Default: true

Show the tour progress marker dots.

stepDotsPlacement

# Type: 'footer' | 'body' Default: 'footer'

Whether to output the step dots in the tour dialog body or centered in the footer.

showButtons

# Type: boolean Default: true

Display the next and prev buttons. Can be used in conjunction with hideNext & hidePrev.

showStepProgress

# Type: boolean Default: true

Show `1/5` human-readable step progress in the tour dialog footer.

progressBar

# Type: string Default: ""

// show progress bar under dialog header - pass a colour string to enable

closeButton

# Type: boolean Default: true

Display the close button in the top-right corner of the tour dialog.

rememberStep

# Type: boolean Default: false

Continue the tour from last active step when re-opening.

debug

# Type: boolean Default: true

Display console logging.