0
# Step Management
1

2
Step system for defining tour content, positioning, and behavior. Steps can be defined programmatically or using HTML data attributes, providing flexible configuration for different use cases.
3

4
## Capabilities
5

6
### Add Single Step
7

8
Add a single step to the tour configuration.
9

10
```typescript { .api }
11
/**
12
 * Add a single step to the tour
13
 * @param step - Partial step definition to add
14
 * @returns IntroJs instance for chaining
15
 */
16
addStep(step: Partial<IntroStep>): IntroJs;
17
```
18

19
### Add Multiple Steps
20

21
Add multiple steps at once to the tour configuration.
22

23
```typescript { .api }
24
/**
25
 * Add multiple steps to the tour
26
 * @param steps - Array of partial step definitions
27
 * @returns IntroJs instance for chaining
28
 */
29
addSteps(steps: Partial<IntroStep>[]): IntroJs;
30
```
31

32
**Usage Examples:**
33

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

37
// Add single step
38
const intro = introJs()
39
  .addStep({
40
    element: "#welcome-message",
41
    intro: "Welcome to our application!",
42
    position: "bottom"
43
  })
44
  .addStep({
45
    element: "#navigation-menu", 
46
    intro: "Use this menu to navigate between sections",
47
    position: "right"
48
  });
49

50
// Add multiple steps
51
const intro = introJs().addSteps([
52
  {
53
    element: "#dashboard",
54
    title: "Dashboard Overview",
55
    intro: "This is your personal dashboard where you can see all your data",
56
    position: "bottom"
57
  },
58
  {
59
    element: "#user-profile",
60
    title: "User Profile",
61
    intro: "Click here to manage your profile settings",
62
    position: "left",
63
    tooltipClass: "custom-tooltip"
64
  },
65
  {
66
    element: "#help-button",
67
    intro: "Need help? Click here anytime for assistance",
68
    position: "top",
69
    disableInteraction: true
70
  }
71
]);
72
```
73

74
### IntroStep Interface
75

76
Complete step definition interface with all available properties.
77

78
```typescript { .api }
79
interface IntroStep {
80
  /** Step number for ordering (used with data-step attributes) */
81
  step: number;
82
  /** Title displayed in the tooltip header */
83
  title: string;
84
  /** Main content/description for the step */
85
  intro: string;
86
  /** Custom CSS class for this step's tooltip */
87
  tooltipClass?: string;
88
  /** Custom CSS class for this step's highlight */
89
  highlightClass?: string;
90
  /** Target element (selector string, HTMLElement, or null for modal) */
91
  element?: HTMLElement | string | null;
92
  /** Tooltip positioning relative to target element */
93
  position: TooltipPosition;
94
  /** Scrolling behavior for this step */
95
  scrollTo: ScrollTo;
96
  /** Whether to disable interaction with the target element */
97
  disableInteraction?: boolean;
98
}
99
```
100

101
## Step Configuration Patterns
102

103
### Basic Step Definition
104

105
Minimal step configuration with required properties.
106

107
**Usage Examples:**
108

109
```typescript
110
// Minimal step
111
introJs().addStep({
112
  element: "#button1",
113
  intro: "Click this button to get started"
114
});
115

116
// Step with title
117
introJs().addStep({
118
  element: "#settings",
119
  title: "Settings Panel",
120
  intro: "Configure your preferences here"
121
});
122
```
123

124
### Element Targeting
125

126
Different ways to target elements for steps.
127

128
**Usage Examples:**
129

130
```typescript
131
// Target by CSS selector
132
introJs().addStep({
133
  element: "#my-element",
134
  intro: "This targets an element by ID"
135
});
136

137
// Target by class selector
138
introJs().addStep({
139
  element: ".toolbar-button:first-child", 
140
  intro: "This targets the first toolbar button"
141
});
142

143
// Target by DOM element reference
144
const element = document.querySelector("#dynamic-content");
145
introJs().addStep({
146
  element: element,
147
  intro: "This uses a DOM element reference"
148
});
149

150
// Modal step (no target element)
151
introJs().addStep({
152
  element: null,
153
  title: "Welcome!",
154
  intro: "This is a modal step that doesn't highlight any element"
155
});
156
```
157

158
### Positioning and Layout
159

160
Control tooltip positioning relative to target elements.
161

162
**Usage Examples:**
163

164
```typescript
165
// Basic positioning
166
introJs().addSteps([
167
  {
168
    element: "#header",
169
    intro: "Header section",
170
    position: "bottom"
171
  },
172
  {
173
    element: "#sidebar",
174
    intro: "Navigation sidebar", 
175
    position: "right"
176
  },
177
  {
178
    element: "#footer",
179
    intro: "Footer information",
180
    position: "top"
181
  }
182
]);
183

184
// Advanced positioning with alignment
185
introJs().addSteps([
186
  {
187
    element: "#logo",
188
    intro: "Company logo",
189
    position: "bottom-left-aligned"
190
  },
191
  {
192
    element: "#search",
193
    intro: "Search functionality",
194
    position: "bottom-middle-aligned"
195
  },
196
  {
197
    element: "#user-menu",
198
    intro: "User account menu",
199
    position: "bottom-right-aligned"
200
  }
201
]);
202

203
// Floating tooltip (position automatically determined)
204
introJs().addStep({
205
  element: "#complex-widget",
206
  intro: "This tooltip will position itself optimally",
207
  position: "floating"
208
});
209
```
210

211
### Custom Styling
212

213
Apply custom CSS classes to individual steps.
214

215
**Usage Examples:**
216

217
```typescript
218
// Custom tooltip styling
219
introJs().addStep({
220
  element: "#important-feature",
221
  title: "Important Feature",
222
  intro: "This is a critical feature you should know about",
223
  tooltipClass: "important-step highlight-red",
224
  highlightClass: "pulse-animation"
225
});
226

227
// Different styles for different step types
228
introJs().addSteps([
229
  {
230
    element: "#basic-feature",
231
    intro: "Basic feature description",
232
    tooltipClass: "basic-tooltip"
233
  },
234
  {
235
    element: "#advanced-feature", 
236
    intro: "Advanced feature with special styling",
237
    tooltipClass: "advanced-tooltip premium-style"
238
  },
239
  {
240
    element: "#warning-area",
241
    intro: "Be careful with this feature",
242
    tooltipClass: "warning-tooltip",
243
    highlightClass: "warning-highlight"
244
  }
245
]);
246
```
247

248
### Interaction Control
249

250
Control user interaction with target elements during steps.
251

252
**Usage Examples:**
253

254
```typescript
255
// Disable interaction during step
256
introJs().addStep({
257
  element: "#dangerous-button",
258
  intro: "This button performs a critical action. We've disabled it during the tour.",
259
  disableInteraction: true
260
});
261

262
// Allow interaction (default behavior)
263
introJs().addStep({
264
  element: "#try-me-button",
265
  intro: "Feel free to click this button to try it out!",
266
  disableInteraction: false
267
});
268
```
269

270
### Scrolling Behavior
271

272
Control how the page scrolls when showing each step.
273

274
**Usage Examples:**
275

276
```typescript
277
// Custom scroll behavior per step
278
introJs().addSteps([
279
  {
280
    element: "#top-section",
281
    intro: "This section is at the top",
282
    scrollTo: "element" // Scroll to make element visible
283
  },
284
  {
285
    element: "#modal-trigger",
286
    intro: "This will open a modal",
287
    scrollTo: "tooltip" // Scroll to position tooltip optimally
288
  },
289
  {
290
    element: "#footer-info",
291
    intro: "Footer information", 
292
    scrollTo: "off" // Don't scroll for this step
293
  }
294
]);
295
```
296

297
## HTML Data Attributes
298

299
Steps can also be defined using HTML data attributes instead of programmatic configuration.
300

301
**HTML Examples:**
302

303
```html
304
<!-- Basic step with data attributes -->
305
<button 
306
  data-intro="Click here to save your work"
307
  data-step="1">
308
  Save
309
</button>
310

311
<!-- Advanced step with positioning and styling -->
312
<div 
313
  data-intro="This is your dashboard overview"
314
  data-step="2"
315
  data-title="Dashboard"
316
  data-position="bottom"
317
  data-tooltip-class="dashboard-tooltip"
318
  data-highlight-class="dashboard-highlight"
319
  data-disable-interaction="false">
320
  Dashboard Content
321
</div>
322

323
<!-- Step with scrolling control -->
324
<section
325
  data-intro="Important section to review"
326
  data-step="3"
327
  data-scroll-to="element"
328
  data-position="top">
329
  Important Content
330
</section>
331
```
332

333
### Complete HTML Data Attributes Reference
334

335
All IntroStep properties can be configured using HTML data attributes:
336

337
| Attribute | Description | Values |
338
|-----------|-------------|---------|
339
| `data-step` | Step number for ordering | number |
340
| `data-intro` | Step content/description | string |
341
| `data-title` | Step title (optional) | string |
342
| `data-position` | Tooltip position | TooltipPosition values |
343
| `data-tooltip-class` | Custom CSS class for tooltip | string |
344
| `data-highlight-class` | Custom CSS class for highlight | string |
345
| `data-scroll-to` | Scroll behavior | "off", "element", "tooltip" |
346
| `data-disable-interaction` | Disable element interaction | "true", "false" |
347
348
**JavaScript to start HTML-defined tour:**
349

350
```typescript
351
// Start tour using HTML data attributes
352
introJs().start();
353

354
// Start tour for specific container
355
introJs("#tour-container").start();
356

357
// Combine HTML attributes with programmatic options
358
introJs()
359
  .setOptions({
360
    showStepNumbers: true,
361
    nextLabel: "Continue"
362
  })
363
  .start();
364
```
365

366
## Step Ordering and Numbering
367

368
Control the order in which steps are presented.
369

370
**Usage Examples:**
371

372
```typescript
373
// Steps will be ordered by step number
374
introJs().addSteps([
375
  {
376
    element: "#step-three",
377
    intro: "This appears third",
378
    step: 3
379
  },
380
  {
381
    element: "#step-one", 
382
    intro: "This appears first",
383
    step: 1
384
  },
385
  {
386
    element: "#step-two",
387
    intro: "This appears second", 
388
    step: 2
389
  }
390
]);
391

392
// Without step numbers, order follows array order
393
introJs().addSteps([
394
  { element: "#first", intro: "First step" },
395
  { element: "#second", intro: "Second step" },
396
  { element: "#third", intro: "Third step" }
397
]);
398
```