Skip to main content

Tour options

Options​

isActive​

Is this tour instance active? Don't show the tour again if this flag is set to false

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

group​

Start intro for a group of elements

highlightClass​

CSS class that is added to 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

stepNumbersOfLabel​

Pagination "of" label

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

autoPosition​

To determine the tooltip position automatically based on the window.width/height

positionPrecedence​

Precedence of positions, when auto is enabled

disableInteraction​

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

dontShowAgain​

To display the "Don't show again" checkbox in the tour

dontShowAgainLabel​

"Don't Show Again" label

dontShowAgainCookie​

dontShowAgainCookieDays​

"Don't show again" cookie name and expiry (in days)

helperElementPadding​

Set how much padding to be used around helper element

buttonClass​

Additional classes to put on the buttons

progressBarAdditionalClass​

Additional classes to put on progress bar

Updating options​

An example of adding an option:

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