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", " > ");
Last updated on by Afshin Mehrabani