0
# Tour Management
1

2
Complete guided tour functionality for creating step-by-step product walkthroughs. The Tour class provides comprehensive navigation, step management, and customization capabilities.
3

4
## Capabilities
5

6
### Tour Creation
7

8
Create a new Tour instance with optional target element and configuration options.
9

10
```typescript { .api }
11
/**
12
 * Create a new Tour instance
13
 * @param elementOrSelector - Optional target element or CSS selector to start the Tour on
14
 * @param options - Optional Tour configuration options
15
 */
16
new Tour(elementOrSelector?: string | HTMLElement, options?: Partial<TourOptions>): Tour;
17

18
/**
19
 * Create Tour instance via static method (recommended)
20
 * @param elementOrSelector - Optional target element or CSS selector
21
 */
22
introJs.tour(elementOrSelector?: string | HTMLElement): Tour;
23
```
24

25
**Usage Examples:**
26

27
```javascript
28
import introJs from "intro.js";
29

30
// Create tour for entire document
31
const tour = introJs.tour();
32

33
// Create tour for specific element
34
const tour = introJs.tour("#main-content");
35

36
// Create tour with initial options
37
const tour = introJs.tour(document.body, {
38
  exitOnEsc: false,
39
  showStepNumbers: true,
40
  tooltipPosition: "top"
41
});
42
```
43

44
### Tour Control
45

46
Start, stop, and navigate through tours with full lifecycle control.
47

48
```typescript { .api }
49
/**
50
 * Start the tour and show the first step
51
 */
52
start(): Promise<Tour>;
53

54
/**
55
 * Exit the tour
56
 * @param force - Whether to force exit without confirmation
57
 */
58
exit(force?: boolean): Promise<Tour>;
59

60
/**
61
 * Go to the next step of the tour
62
 */
63
nextStep(): Promise<Tour>;
64

65
/**
66
 * Go to the previous step of the tour
67
 */
68
previousStep(): Promise<Tour>;
69

70
/**
71
 * Go to a specific step by index (1-based)
72
 * @param step - Step number to navigate to
73
 */
74
goToStep(step: number): Promise<Tour>;
75

76
/**
77
 * Go to a step with specific data-step attribute value
78
 * @param stepNumber - The [data-step] value of the target step
79
 */
80
goToStepNumber(stepNumber: number): Promise<Tour>;
81
```
82

83
**Usage Examples:**
84

85
```javascript
86
import introJs from "intro.js";
87

88
const tour = introJs.tour()
89
  .addStep({
90
    title: "Welcome",
91
    intro: "Let's get started!",
92
    element: "#welcome"
93
  })
94
  .addStep({
95
    title: "Features", 
96
    intro: "Here are the main features",
97
    element: "#features"
98
  });
99

100
// Start the tour
101
await tour.start();
102

103
// Navigate programmatically
104
await tour.nextStep();
105
await tour.goToStep(1);
106
await tour.exit();
107
```
108

109
### Step Management
110

111
Add, modify, and retrieve tour steps with full programmatic control.
112

113
```typescript { .api }
114
/**
115
 * Add a single step to the tour
116
 * @param step - Step configuration object
117
 */
118
addStep(step: Partial<TourStep>): Tour;
119

120
/**
121
 * Add multiple steps to the tour
122
 * @param steps - Array of step configuration objects
123
 */
124
addSteps(steps: Partial<TourStep>[]): Tour;
125

126
/**
127
 * Set all tour steps, replacing existing ones
128
 * @param steps - Complete array of tour steps
129
 */
130
setSteps(steps: TourStep[]): Tour;
131

132
/**
133
 * Get all available tour steps
134
 */
135
getSteps(): TourStep[];
136

137
/**
138
 * Get a specific step by index
139
 * @param step - Step index (0-based)
140
 */
141
getStep(step: number): TourStep;
142
```
143

144
**Usage Examples:**
145

146
```javascript
147
import introJs from "intro.js";
148

149
const tour = introJs.tour();
150

151
// Add individual steps
152
tour.addStep({
153
  title: "Dashboard",
154
  intro: "This is your main dashboard",
155
  element: "#dashboard",
156
  position: "bottom"
157
});
158

159
// Add multiple steps at once
160
tour.addSteps([
161
  {
162
    title: "Navigation",
163
    intro: "Use this menu to navigate",
164
    element: ".nav-menu"
165
  },
166
  {
167
    title: "Profile",
168
    intro: "Access your profile here",
169
    element: "#profile-link"
170
  }
171
]);
172

173
// Start the tour
174
await tour.start();
175
```
176

177
### State Management
178

179
Query and control tour state, including current step tracking and direction.
180

181
```typescript { .api }
182
/**
183
 * Get the current step index
184
 */
185
getCurrentStep(): number | undefined;
186

187
/**
188
 * @deprecated Use getCurrentStep() instead
189
 * Get the current step index
190
 */
191
currentStep(): number | undefined;
192

193
/**
194
 * Set the current step and navigation direction
195
 * @param step - Step index to set as current
196
 */
197
setCurrentStep(step: number): Tour;
198

199
/**
200
 * Reset current step to undefined
201
 */
202
resetCurrentStep(): void;
203

204
/**
205
 * Increment the current step index
206
 */
207
incrementCurrentStep(): Tour;
208

209
/**
210
 * Decrement the current step index
211
 */
212
decrementCurrentStep(): Tour;
213

214
/**
215
 * Get the navigation direction
216
 */
217
getDirection(): "forward" | "backward";
218

219
/**
220
 * Check if the tour has ended
221
 */
222
isEnd(): boolean;
223

224
/**
225
 * Check if current step is the last step
226
 */
227
isLastStep(): boolean;
228

229
/**
230
 * Check if the tour instance is active
231
 */
232
isActive(): boolean;
233

234
/**
235
 * Check if the tour has started
236
 */
237
hasStarted(): boolean;
238
```
239

240
**Usage Examples:**
241

242
```javascript
243
import introJs from "intro.js";
244

245
const tour = introJs.tour();
246

247
// Check tour state
248
if (!tour.hasStarted()) {
249
  await tour.start();
250
}
251

252
// Track progress
253
console.log(`Current step: ${tour.getCurrentStep()}`);
254
console.log(`Direction: ${tour.getDirection()}`);
255
console.log(`Is last step: ${tour.isLastStep()}`);
256

257
// Conditional navigation
258
if (!tour.isEnd()) {
259
  await tour.nextStep();
260
}
261
```
262

263
### Options Management
264

265
Configure tour behavior, appearance, and interaction patterns.
266

267
```typescript { .api }
268
/**
269
 * Set multiple tour options
270
 * @param partialOptions - Object containing option key-value pairs
271
 */
272
setOptions(partialOptions: Partial<TourOptions>): Tour;
273

274
/**
275
 * Set a single tour option
276
 * @param key - Option key
277
 * @param value - Option value
278
 */
279
setOption<K extends keyof TourOptions>(key: K, value: TourOptions[K]): Tour;
280

281
/**
282
 * Get a specific tour option value
283
 * @param key - Option key
284
 */
285
getOption<K extends keyof TourOptions>(key: K): TourOptions[K];
286
```
287

288
**Usage Examples:**
289

290
```javascript
291
import introJs from "intro.js";
292

293
const tour = introJs.tour();
294

295
// Set multiple options
296
tour.setOptions({
297
  exitOnEsc: false,
298
  showStepNumbers: true,
299
  tooltipPosition: "top",
300
  overlayOpacity: 0.8
301
});
302

303
// Set individual option
304
tour.setOption("nextLabel", "Continue");
305

306
// Get option value
307
const position = tour.getOption("tooltipPosition");
308
```
309

310
### Utility Methods
311

312
Additional utility methods for tour management and customization.
313

314
```typescript { .api }
315
/**
316
 * Clone the current tour instance
317
 */
318
clone(): Tour;
319

320
/**
321
 * Get the target element for the tour
322
 */
323
getTargetElement(): HTMLElement;
324

325
/**
326
 * Refresh the tour, optionally refetching steps
327
 * @param refreshSteps - Whether to refetch steps from DOM/options
328
 */
329
refresh(refreshSteps?: boolean): Tour;
330

331
/**
332
 * Set persistent "don't show again" flag
333
 * @param dontShowAgain - Boolean value for the flag
334
 */
335
setDontShowAgain(dontShowAgain: boolean): Tour;
336
```
337

338
### Keyboard and Event Management
339

340
Control keyboard navigation and window event handling for tours.
341

342
```typescript { .api }
343
/**
344
 * Enable keyboard navigation for the tour
345
 */
346
enableKeyboardNavigation(): Tour;
347

348
/**
349
 * Disable keyboard navigation for the tour
350
 */
351
disableKeyboardNavigation(): Tour;
352

353
/**
354
 * Enable refresh on window resize
355
 */
356
enableRefreshOnResize(): void;
357

358
/**
359
 * Disable refresh on window resize
360
 */
361
disableRefreshOnResize(): void;
362
```
363

364
### Step Definition Interface
365

366
Complete interface for defining tour steps with all available options.
367

368
```typescript { .api }
369
interface TourStep {
370
  /** Step index number */
371
  step: number;
372
  /** Step title displayed in tooltip header */
373
  title: string;
374
  /** Step content/description */
375
  intro: string;
376
  /** Target element for this step */
377
  element?: Element | HTMLElement | string | null;
378
  /** Tooltip position for this step */
379
  position: TooltipPosition;
380
  /** Scroll behavior for this step */
381
  scrollTo: ScrollTo;
382
  /** Whether to disable interaction with the target element */
383
  disableInteraction?: boolean;
384
  /** Custom CSS class for this step's tooltip */
385
  tooltipClass?: string;
386
  /** Custom CSS class for this step's highlight */
387
  highlightClass?: string;
388
}
389
```
390

391
**Usage Examples:**
392

393
```javascript
394
import introJs from "intro.js";
395

396
const tour = introJs.tour();
397

398
// Complete step definition
399
tour.addStep({
400
  step: 1,
401
  title: "Welcome to the Dashboard",
402
  intro: "This is where you'll find all your important metrics and controls.",
403
  element: "#main-dashboard",
404
  position: "bottom-middle-aligned",
405
  scrollTo: "element",
406
  disableInteraction: true,
407
  tooltipClass: "custom-tooltip",
408
  highlightClass: "custom-highlight"
409
});
410
```
411

412
### Deprecated Methods
413

414
Legacy methods maintained for backward compatibility:
415

416
```typescript { .api }
417
/**
418
 * @deprecated Use onBeforeChange instead
419
 */
420
onbeforechange(callback: introBeforeChangeCallback): Tour;
421

422
/**
423
 * @deprecated Use onChange instead
424
 */
425
onchange(callback: introChangeCallback): Tour;
426

427
/**
428
 * @deprecated Use onAfterChange instead
429
 */
430
onafterchange(callback: introAfterChangeCallback): Tour;
431

432
/**
433
 * @deprecated Use onComplete instead  
434
 */
435
oncomplete(callback: introCompleteCallback): Tour;
436

437
/**
438
 * @deprecated Use onStart instead
439
 */
440
onstart(callback: introStartCallback): Tour;
441

442
/**
443
 * @deprecated Use onExit instead
444
 */
445
onexit(callback: introExitCallback): Tour;
446

447
/**
448
 * @deprecated Use onSkip instead
449
 */
450
onskip(callback: introSkipCallback): Tour;
451

452
/**
453
 * @deprecated Use onBeforeExit instead
454
 */
455
onbeforeexit(callback: introBeforeExitCallback): Tour;
456
```