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
Default: true

steps​

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

nextLabel​

Next button label
Default: "Next"

prevLabel​

Previous button label
Default: "Back"

skipLabel​

Skip button label
Default: "x"

doneLabel​

Done button label
Default: "Done"

hidePrev​

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

hideNext​

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

nextToDone​

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

tooltipPosition​

Default tooltip position
Default: "bottom"

tooltipClass​

Adding CSS class to all tooltips
Default: ""

group​

Start intro for a group of elements
Default: ""

highlightClass​

CSS class that is added to the helperLayer
Default: ""

exitOnEsc​

Exit introduction when pressing Escape button, true or false
Default: true

exitOnOverlayClick​

Exit introduction when clicking on overlay layer, true or false
Default: true

showStepNumbers​

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

stepNumbersOfLabel​

Pagination "of" label
Default: "of"

keyboardNavigation​

Navigating with keyboard or not, true or false
Default: true

showButtons​

Show introduction navigation buttons or not, true or false
Default: true

showBullets​

Show introduction bullets or not, true or false
Default: true

showProgress​

Show introduction progress or not, true or false
Default: false

scrollToElement​

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

scrollTo​

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

scrollPadding​

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

overlayOpacity​

Adjust the overlay opacity, Number between 0 and 1
Default: 0.5

autoPosition​

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

positionPrecedence​

Precedence of positions, when auto is enabled
Default: ["bottom", "top", "right", "left"]

disableInteraction​

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

dontShowAgain​

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

dontShowAgainLabel​

"Don't Show Again" label
Default: "Don't show this again"

dontShowAgainCookie​

"Don't show again" cookie name
Default: "introjs-dontShowAgain"

Note: This is cookie name, to use IntroJS tour on multiple pages, and wish to enable the "Don't show again" checkbox, it must use the dontShowAgainCookie option to set a unique cookie name on each page where using IntroJS.

dontShowAgainCookieDays​

"Don't show again" cookie expiry (in days)
Default: 365

helperElementPadding​

Set how much padding to be used around helper element
Default: 10

buttonClass​

Additional classes to put on the buttons
Default: ""

progressBarAdditionalClass​

Additional classes to put on progress bar
Default: false

Updating options​

An example of adding an option:

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