Comprehensive configuration system with separate option sets for tours and hints, supporting extensive customization of appearance, behavior, and interaction patterns.
Complete configuration interface for Tour instances with extensive customization options.
interface TourOptions {
/** Array of tour steps */
steps: Partial<TourStep>[];
/** Is this tour instance active? Don't show the tour again if set to false */
isActive: boolean;
/** Next button label in tooltip box */
nextLabel: string;
/** Previous button label in tooltip box */
prevLabel: string;
/** Skip button label in tooltip box */
skipLabel: string;
/** Done button label in tooltip box */
doneLabel: string;
/** Hide previous button in the first step? Otherwise, it will be disabled */
hidePrev: boolean;
/** Hide next button in the last step? Otherwise, it will be disabled */
hideNext: boolean;
/** Change the Next button to Done in the last step of the intro */
nextToDone: boolean;
/** Default tooltip box position */
tooltipPosition: TooltipPosition;
/** CSS class for tooltip boxes */
tooltipClass: string;
/** Start intro for a group of elements */
group: string;
/** CSS class that is added to the helperLayer */
highlightClass: string;
/** Close introduction when pressing Escape button? */
exitOnEsc: boolean;
/** Close introduction when clicking on overlay layer? */
exitOnOverlayClick: boolean;
/** Display the pagination detail */
showStepNumbers: boolean;
/** Pagination "of" label */
stepNumbersOfLabel: string;
/** Let user use keyboard to navigate the tour? */
keyboardNavigation: boolean;
/** Show tour control buttons? */
showButtons: boolean;
/** Show tour bullets? */
showBullets: boolean;
/** Show tour progress? */
showProgress: boolean;
/** Scroll to highlighted element? */
scrollToElement: boolean;
/** Should we scroll the tooltip or target element? */
scrollTo: ScrollTo;
/** Padding to add after scrolling when element is not in the viewport (in pixels) */
scrollPadding: number;
/** Set the overlay opacity */
overlayOpacity: number;
/** To determine the tooltip position automatically based on the window.width/height */
autoPosition: boolean;
/** Precedence of positions, when auto is enabled */
positionPrecedence: TooltipPosition[];
/** Disable an interaction with element? */
disableInteraction: boolean;
/** To display the "Don't show again" checkbox in the tour */
dontShowAgain: boolean;
/** "Don't show again" checkbox label */
dontShowAgainLabel: string;
/** "Don't show again" cookie name */
dontShowAgainCookie: string;
/** "Don't show again" cookie expiry (in days) */
dontShowAgainCookieDays: number;
/** Set how much padding to be used around helper element */
helperElementPadding: number;
/** Additional classes to put on the buttons */
buttonClass: string;
/** Additional classes to put on progress bar */
progressBarAdditionalClass: string;
/** Optional property to determine if content should be rendered as HTML */
tooltipRenderAsHtml?: boolean;
}Default configuration values for Tour instances.
/**
* Get the default tour options
*/
function getDefaultTourOptions(): TourOptions;Default Values:
{
steps: [],
isActive: true,
nextLabel: "Next",
prevLabel: "Back",
skipLabel: "×",
doneLabel: "Done",
hidePrev: false,
hideNext: false,
nextToDone: true,
tooltipPosition: "bottom",
tooltipClass: "",
group: "",
highlightClass: "",
exitOnEsc: true,
exitOnOverlayClick: true,
showStepNumbers: false,
stepNumbersOfLabel: "of",
keyboardNavigation: true,
showButtons: true,
showBullets: true,
showProgress: false,
scrollToElement: true,
scrollTo: "element",
scrollPadding: 30,
overlayOpacity: 0.5,
autoPosition: true,
positionPrecedence: ["bottom", "top", "right", "left"],
disableInteraction: false,
dontShowAgain: false,
dontShowAgainLabel: "Don't show this again",
dontShowAgainCookie: "introjs-dontShowAgain",
dontShowAgainCookieDays: 365,
helperElementPadding: 10,
buttonClass: "introjs-button",
progressBarAdditionalClass: "",
tooltipRenderAsHtml: true
}Basic Tour Configuration:
import introJs from "intro.js";
const tour = introJs.tour();
// Set comprehensive tour options
tour.setOptions({
// Button labels
nextLabel: "Continue →",
prevLabel: "← Back",
skipLabel: "Skip Tour",
doneLabel: "Finish",
// Appearance
tooltipPosition: "top",
tooltipClass: "custom-tour-tooltip",
highlightClass: "custom-highlight",
overlayOpacity: 0.7,
// Behavior
exitOnEsc: true,
exitOnOverlayClick: false,
keyboardNavigation: true,
scrollToElement: true,
scrollPadding: 50,
// UI Elements
showStepNumbers: true,
showProgress: true,
showButtons: true,
showBullets: false,
// Don't show again functionality
dontShowAgain: true,
dontShowAgainLabel: "Don't show this tour again",
dontShowAgainCookie: "my-app-tour-seen",
dontShowAgainCookieDays: 30
});Complete configuration interface for Hint instances.
interface HintOptions {
/** List of all HintItems */
hints: Partial<HintItem>[];
/** True if the Hint instance is set to active */
isActive: boolean;
/** Default tooltip box position */
tooltipPosition: string;
/** CSS class for tooltip boxes */
tooltipClass: string;
/** Default hint position */
hintPosition: HintPosition;
/** Hint button label */
hintButtonLabel: string;
/** Display the "Got it" button? */
hintShowButton: boolean;
/** Hints auto-refresh interval in ms (set to -1 to disable) */
hintAutoRefreshInterval: number;
/** Adding animation to hints? */
hintAnimation: boolean;
/** Additional classes to put on the buttons */
buttonClass: string;
/** Set how much padding to be used around helper element */
helperElementPadding: number;
/** To determine the tooltip position automatically based on the window.width/height */
autoPosition: boolean;
/** Precedence of positions, when auto is enabled */
positionPrecedence: TooltipPosition[];
/** Optional property to determine if content should be rendered as HTML */
tooltipRenderAsHtml?: boolean;
}Default configuration values for Hint instances.
/**
* Get the default hint options
*/
function getDefaultHintOptions(): HintOptions;Default Values:
{
hints: [],
isActive: true,
tooltipPosition: "bottom",
tooltipClass: "",
hintPosition: "top-middle",
hintButtonLabel: "Got it",
hintShowButton: true,
hintAutoRefreshInterval: 10,
hintAnimation: true,
buttonClass: "introjs-button",
helperElementPadding: 10,
autoPosition: true,
positionPrecedence: ["bottom", "top", "right", "left"],
tooltipRenderAsHtml: true
}Basic Hint Configuration:
import introJs from "intro.js";
const hint = introJs.hint();
// Set comprehensive hint options
hint.setOptions({
// Appearance
tooltipPosition: "top",
tooltipClass: "custom-hint-tooltip",
hintPosition: "bottom-right",
// Behavior
hintAnimation: true,
hintAutoRefreshInterval: 100,
autoPosition: true,
positionPrecedence: ["top", "bottom", "left", "right"],
// Button configuration
hintShowButton: true,
hintButtonLabel: "Understood",
buttonClass: "custom-hint-button",
// Styling
helperElementPadding: 15,
tooltipRenderAsHtml: true
});Detailed configuration for tooltip and hint positioning.
/**
* Tooltip position options for tours and hints
*/
type TooltipPosition =
| "floating" // Centered on screen, no target element
| "top" // Above the target element
| "bottom" // Below the target element
| "left" // Left of the target element
| "right" // Right of the target element
| "top-right-aligned" // Above, aligned to right edge
| "top-left-aligned" // Above, aligned to left edge
| "top-middle-aligned" // Above, centered horizontally
| "bottom-right-aligned" // Below, aligned to right edge
| "bottom-left-aligned" // Below, aligned to left edge
| "bottom-middle-aligned"; // Below, centered horizontally
/**
* Hint icon position options (relative to target element)
*/
type HintPosition =
| "top-left" // Top-left corner
| "top-right" // Top-right corner
| "top-middle" // Top edge, centered
| "bottom-left" // Bottom-left corner
| "bottom-right" // Bottom-right corner
| "bottom-middle" // Bottom edge, centered
| "middle-left" // Left edge, vertically centered
| "middle-right" // Right edge, vertically centered
| "middle-middle"; // Center of element
/**
* Scroll behavior options for tours
*/
type ScrollTo =
| "off" // No automatic scrolling
| "element" // Scroll to bring target element into view
| "tooltip"; // Scroll to bring tooltip into viewTour with Advanced Positioning:
import introJs from "intro.js";
const tour = introJs.tour()
.setOptions({
// Auto-positioning with custom precedence
autoPosition: true,
positionPrecedence: ["top", "right", "bottom", "left"],
// Custom scroll behavior
scrollToElement: true,
scrollTo: "tooltip",
scrollPadding: 100,
// Fine-tuned appearance
overlayOpacity: 0.3,
helperElementPadding: 20,
// Step-specific overrides will still work
tooltipPosition: "bottom-middle-aligned"
})
.addStep({
title: "Special Element",
intro: "This step uses custom positioning",
element: "#special-element",
position: "top-left-aligned" // Overrides default
});Hint with Performance Optimization:
import introJs from "intro.js";
const hint = introJs.hint()
.setOptions({
// Optimize for performance
hintAutoRefreshInterval: 500, // Less frequent updates
hintAnimation: false, // Disable animations
// Custom positioning for mobile
hintPosition: "top-middle",
autoPosition: true,
positionPrecedence: ["top", "bottom"], // Prefer vertical positions
// Minimal UI
hintShowButton: false,
helperElementPadding: 5
});All options are fully typed and validated:
import introJs from "intro.js";
const tour = introJs.tour();
// TypeScript will catch invalid option keys
tour.setOption("invalidOption", "value"); // ❌ Type error
// Valid option setting
tour.setOption("nextLabel", "Proceed"); // ✅ Valid
// Get option with type safety
const isActive: boolean = tour.getOption("isActive"); // ✅ Typed return