0
# Configuration
1

2
Comprehensive options system for customizing tour behavior, appearance, and interaction patterns. Intro.js provides extensive configuration options to control every aspect of the user experience.
3

4
## Capabilities
5

6
### Set Single Option
7

8
Configure a single option on the IntroJs instance.
9

10
```typescript { .api }
11
/**
12
 * Set a single option on the IntroJs instance
13
 * @param key - The option key to set
14
 * @param value - The value to set for the option
15
 * @returns IntroJs instance for chaining
16
 */
17
setOption<K extends keyof Options>(key: K, value: Options[K]): IntroJs;
18
```
19

20
### Set Multiple Options
21

22
Configure multiple options at once using a partial options object.
23

24
```typescript { .api }
25
/**
26
 * Set multiple options on the IntroJs instance
27
 * @param partialOptions - Partial options object with values to set
28
 * @returns IntroJs instance for chaining
29
 */
30
setOptions(partialOptions: Partial<Options>): IntroJs;
31
```
32

33
**Usage Examples:**
34

35
```typescript
36
import introJs from "intro.js";
37

38
// Set single option
39
const intro = introJs()
40
  .setOption("nextLabel", "Continue →")
41
  .setOption("showStepNumbers", true);
42

43
// Set multiple options
44
const intro = introJs().setOptions({
45
  nextLabel: "Next →",
46
  prevLabel: "← Back",
47
  doneLabel: "Complete",
48
  showStepNumbers: true,
49
  exitOnEsc: false,
50
  overlayOpacity: 0.8
51
});
52
```
53

54
### Get Default Options
55

56
Get the default configuration options for IntroJs.
57

58
```typescript { .api }
59
/**
60
 * Get default options for IntroJs
61
 * @returns Complete Options object with default values
62
 */
63
function getDefaultOptions(): Options;
64
```
65

66
**Usage Examples:**
67

68
```typescript
69
import introJs, { getDefaultOptions } from "intro.js";
70

71
// Get default options
72
const defaults = getDefaultOptions();
73
console.log("Default next label:", defaults.nextLabel);
74

75
// Use defaults as base for custom configuration
76
const customOptions = {
77
  ...getDefaultOptions(),
78
  nextLabel: "Continue →",
79
  showStepNumbers: true
80
};
81

82
introJs().setOptions(customOptions);
83
```
84

85
### Options Interface
86

87
Complete configuration interface with all available options.
88

89
```typescript { .api }
90
interface Options {
91
  /** Array of step definitions for the tour */
92
  steps: Partial<IntroStep>[];
93
  /** Array of hint definitions */
94
  hints: Partial<HintStep>[];
95
  /** Is this tour instance active? Don't show tour if false */
96
  isActive: boolean;
97
  /** Next button label in tooltip box */
98
  nextLabel: string;
99
  /** Previous button label in tooltip box */
100
  prevLabel: string;
101
  /** Skip button label in tooltip box */
102
  skipLabel: string;
103
  /** Done button label in tooltip box */
104
  doneLabel: string;
105
  /** Hide previous button in the first step? */
106
  hidePrev: boolean;
107
  /** Hide next button in the last step? */
108
  hideNext: boolean;
109
  /** Change Next button to Done in last step? */
110
  nextToDone: boolean;
111
  /** Default tooltip box position */
112
  tooltipPosition: string;
113
  /** CSS class for tooltip boxes */
114
  tooltipClass: string;
115
  /** Start intro for a group of elements */
116
  group: string;
117
  /** CSS class added to the helperLayer */
118
  highlightClass: string;
119
  /** Close introduction when pressing Escape? */
120
  exitOnEsc: boolean;
121
  /** Close introduction when clicking overlay? */
122
  exitOnOverlayClick: boolean;
123
  /** Display the pagination detail */
124
  showStepNumbers: boolean;
125
  /** Pagination "of" label */
126
  stepNumbersOfLabel: string;
127
  /** Let user use keyboard to navigate? */
128
  keyboardNavigation: boolean;
129
  /** Show tour control buttons? */
130
  showButtons: boolean;
131
  /** Show tour bullets? */
132
  showBullets: boolean;
133
  /** Show tour progress? */
134
  showProgress: boolean;
135
  /** Scroll to highlighted element? */
136
  scrollToElement: boolean;
137
  /** Should we scroll tooltip or target element? */
138
  scrollTo: ScrollTo;
139
  /** Padding after scrolling when element not in viewport */
140
  scrollPadding: number;
141
  /** Set the overlay opacity */
142
  overlayOpacity: number;
143
  /** Determine tooltip position automatically? */
144
  autoPosition: boolean;
145
  /** Precedence of positions when auto is enabled */
146
  positionPrecedence: TooltipPosition[];
147
  /** Disable interaction with element? */
148
  disableInteraction: boolean;
149
  /** Display "Don't show again" checkbox */
150
  dontShowAgain: boolean;
151
  /** "Don't show again" checkbox label */
152
  dontShowAgainLabel: string;
153
  /** "Don't show again" cookie name */
154
  dontShowAgainCookie: string;
155
  /** "Don't show again" cookie expiry in days */
156
  dontShowAgainCookieDays: number;
157
  /** Padding around helper element */
158
  helperElementPadding: number;
159
  /** Default hint position */
160
  hintPosition: HintPosition;
161
  /** Hint button label */
162
  hintButtonLabel: string;
163
  /** Display the "Got it" button? */
164
  hintShowButton: boolean;
165
  /** Hints auto-refresh interval in ms (-1 to disable) */
166
  hintAutoRefreshInterval: number;
167
  /** Add animation to hints? */
168
  hintAnimation: boolean;
169
  /** Additional classes for buttons */
170
  buttonClass: string;
171
  /** Additional classes for progress bar */
172
  progressBarAdditionalClass: boolean;
173
}
174
```
175

176
## Configuration Categories
177

178
### UI Labels and Text
179

180
Options for customizing button labels and displayed text.
181

182
**Usage Examples:**
183

184
```typescript
185
// Customize button labels
186
introJs().setOptions({
187
  nextLabel: "Continue →",
188
  prevLabel: "← Go Back", 
189
  skipLabel: "Skip Tour",
190
  doneLabel: "Get Started!",
191
  stepNumbersOfLabel: "of",
192
  dontShowAgainLabel: "Don't show this tour again"
193
});
194

195
// Internationalization example
196
introJs().setOptions({
197
  nextLabel: "Suivant",
198
  prevLabel: "Précédent", 
199
  skipLabel: "Passer",
200
  doneLabel: "Terminé"
201
});
202
```
203

204
### Layout and Positioning
205

206
Options controlling tooltip positioning and layout behavior.
207

208
**Usage Examples:**
209

210
```typescript
211
// Positioning configuration
212
introJs().setOptions({
213
  tooltipPosition: "top",
214
  autoPosition: true,
215
  positionPrecedence: ["bottom", "top", "right", "left"],
216
  helperElementPadding: 15,
217
  overlayOpacity: 0.7
218
});
219

220
// Scrolling behavior
221
introJs().setOptions({
222
  scrollToElement: true,
223
  scrollTo: "element", // or "tooltip" or "off"
224
  scrollPadding: 50
225
});
226
```
227

228
### Interaction and Navigation
229

230
Options controlling user interaction and navigation behavior.
231

232
**Usage Examples:**
233

234
```typescript
235
// Navigation configuration
236
introJs().setOptions({
237
  keyboardNavigation: true,
238
  exitOnEsc: true,
239
  exitOnOverlayClick: false,
240
  disableInteraction: false
241
});
242

243
// Button visibility
244
introJs().setOptions({
245
  showButtons: true,
246
  showBullets: true,
247
  showProgress: false,
248
  hidePrev: false,
249
  hideNext: false,
250
  nextToDone: true
251
});
252
```
253

254
### Visual Styling
255

256
Options for customizing the visual appearance.
257

258
**Usage Examples:**
259

260
```typescript
261
// Styling configuration
262
introJs().setOptions({
263
  tooltipClass: "custom-tooltip",
264
  highlightClass: "custom-highlight",
265
  buttonClass: "custom-button",
266
  progressBarAdditionalClass: true
267
});
268

269
// Step numbering
270
introJs().setOptions({
271
  showStepNumbers: true,
272
  stepNumbersOfLabel: "of"
273
});
274
```
275

276
### Persistence and State
277

278
Options for managing tour state and user preferences.
279

280
**Usage Examples:**
281

282
```typescript
283
// Don't show again functionality
284
introJs().setOptions({
285
  dontShowAgain: true,
286
  dontShowAgainLabel: "Don't show this tour again",
287
  dontShowAgainCookie: "myapp-intro-tour",
288
  dontShowAgainCookieDays: 30
289
});
290

291
// Activity control
292
introJs().setOptions({
293
  isActive: true,
294
  group: "advanced-features"
295
});
296
```
297

298
### Hint System Configuration
299

300
Options specific to the hint system.
301

302
**Usage Examples:**
303

304
```typescript
305
// Hint configuration
306
introJs().setOptions({
307
  hintPosition: "top-middle",
308
  hintButtonLabel: "Got it!",
309
  hintShowButton: true,
310
  hintAutoRefreshInterval: 1000, // 1 second
311
  hintAnimation: true
312
});
313
```
314

315
### Don't Show Again
316

317
Manage the "don't show again" preference for tours.
318

319
```typescript { .api }
320
/**
321
 * Set the don't show again preference
322
 * @param dontShowAgain - Whether to set the preference
323
 * @returns IntroJs instance for chaining
324
 */
325
setDontShowAgain(dontShowAgain: boolean): IntroJs;
326
```
327

328
**Usage Examples:**
329

330
```typescript
331
// Set don't show again preference
332
intro.setDontShowAgain(true);
333

334
// Check if tour should be shown
335
if (intro.isActive()) {
336
  await intro.start();
337
}
338
```