Skip to main content

Tour options

Options

steps

For defining steps using JSON configuration (see the JSON Config example)

nextLabel

Next button label

prevLabel

Previous button label

skipLabel

Skip button label

doneLabel

Done button label

hidePrev

Hide the previous button in the first step? Otherwise, it will render a disabled button.

hideNext

Hide the next button in the last step? Otherwise, it will render a disabled button. (Note: this will also hide the "Done" button)

nextToDone

Change the next button's label to doneLabel in the last step of the intro? otherwise, it will render a disabled button

tooltipPosition

Default tooltip position

tooltipClass

Adding CSS class to all tooltips

highlightClass

Additional CSS class for the helperLayer

exitOnEsc

Exit introduction when pressing Escape button, true or false

exitOnOverlayClick

Exit introduction when clicking on overlay layer, true or false

showStepNumbers

Show steps number in the red circle or not, true or false

keyboardNavigation

Navigating with keyboard or not, true or false

showButtons

Show introduction navigation buttons or not, true or false

showBullets

Show introduction bullets or not, true or false

showProgress

Show introduction progress or not, true or false

scrollToElement

Auto scroll to highlighted element if it’s outside of viewport, true or false

scrollTo

Target element to scroll to (element or tooltip). Default is element. Applies when scrollToElement is true

scrollPadding

Padding of scroll in px. Default is 30. Applies when scrollToElement is true

overlayOpacity

Adjust the overlay opacity, Number between 0 and 1

disableInteraction

To disable interactions with elements inside the highlighted box, true or false

Updating options

An example of adding an option:

introJs().setOption("nextLabel", " > ");