0
# Hints
1
2
Persistent hint system for showing contextual help and tips that users can access on-demand. Unlike tour steps, hints remain visible until explicitly hidden and can be shown/hidden independently.
3
4
## Capabilities
5
6
### Add Hints
7
8
Add hints to the page, making them available for user interaction.
9
10
```typescript { .api }
11
/**
12
* Add hints to the page based on configuration
13
* @returns Promise resolving to the IntroJs instance
14
*/
15
addHints(): Promise<IntroJs>;
16
```
17
18
### Show All Hints
19
20
Display all configured hints on the page.
21
22
```typescript { .api }
23
/**
24
* Show all hints on the page
25
* @returns Promise resolving to the IntroJs instance
26
*/
27
showHints(): Promise<IntroJs>;
28
```
29
30
### Hide All Hints
31
32
Hide all currently visible hints.
33
34
```typescript { .api }
35
/**
36
* Hide all hints on the page
37
* @returns Promise resolving to the IntroJs instance
38
*/
39
hideHints(): Promise<IntroJs>;
40
```
41
42
### Show Specific Hint
43
44
Show a specific hint by its step ID.
45
46
```typescript { .api }
47
/**
48
* Show a specific hint by step ID
49
* @param stepId - The step ID of the hint to show
50
* @returns IntroJs instance for chaining
51
*/
52
showHint(stepId: number): IntroJs;
53
```
54
55
### Hide Specific Hint
56
57
Hide a specific hint by its step ID.
58
59
```typescript { .api }
60
/**
61
* Hide a specific hint by step ID
62
* @param stepId - The step ID of the hint to hide
63
* @returns Promise resolving to the IntroJs instance
64
*/
65
hideHint(stepId: number): Promise<IntroJs>;
66
```
67
68
### Remove All Hints
69
70
Remove all hints from the DOM completely.
71
72
```typescript { .api }
73
/**
74
* Remove all hints from the DOM
75
* @returns IntroJs instance for chaining
76
*/
77
removeHints(): IntroJs;
78
```
79
80
### Remove Specific Hint
81
82
Remove a specific hint from the DOM by its step ID.
83
84
```typescript { .api }
85
/**
86
* Remove a specific hint from the DOM
87
* @param stepId - The step ID of the hint to remove
88
* @returns IntroJs instance for chaining
89
*/
90
removeHint(stepId: number): IntroJs;
91
```
92
93
### Show Hint Dialog
94
95
Display the hint dialog/tooltip for a specific hint.
96
97
```typescript { .api }
98
/**
99
* Show the hint dialog for a specific hint
100
* @param stepId - The step ID of the hint to show dialog for
101
* @returns Promise resolving to the IntroJs instance
102
*/
103
showHintDialog(stepId: number): Promise<IntroJs>;
104
```
105
106
**Usage Examples:**
107
108
```typescript
109
import introJs from "intro.js";
110
111
// Set up hints with configuration
112
const intro = introJs().setOptions({
113
hints: [
114
{
115
element: "#save-button",
116
hint: "Click here to save your work",
117
hintPosition: "top-middle"
118
},
119
{
120
element: "#help-icon",
121
hint: "Need help? Click for documentation",
122
hintPosition: "bottom-left"
123
}
124
]
125
});
126
127
// Add and show hints
128
await intro.addHints();
129
await intro.showHints();
130
131
// Show specific hint
132
intro.showHint(1);
133
134
// Hide specific hint after some time
135
setTimeout(async () => {
136
await intro.hideHint(1);
137
}, 5000);
138
139
// Remove all hints when done
140
intro.removeHints();
141
```
142
143
### HintStep Interface
144
145
Complete hint definition interface with all available properties.
146
147
```typescript { .api }
148
interface HintStep {
149
/** Target element (selector string, HTMLElement, or null) */
150
element?: HTMLElement | string | null;
151
/** Custom CSS class for this hint's tooltip */
152
tooltipClass?: string;
153
/** Tooltip positioning relative to target element */
154
position: TooltipPosition;
155
/** Hint content/text to display */
156
hint?: string;
157
/** Target element for the hint (if different from element) */
158
hintTargetElement?: HTMLElement;
159
/** Whether to animate this hint */
160
hintAnimation?: boolean;
161
/** Position of the hint indicator relative to target */
162
hintPosition: HintPosition;
163
}
164
```
165
166
## Hint Configuration
167
168
### Basic Hint Setup
169
170
Configure hints using the options system.
171
172
**Usage Examples:**
173
174
```typescript
175
// Configure hints in options
176
const intro = introJs().setOptions({
177
hints: [
178
{
179
element: "#feature1",
180
hint: "This is feature 1",
181
hintPosition: "top-middle"
182
},
183
{
184
element: "#feature2",
185
hint: "This is an advanced feature",
186
hintPosition: "bottom-right",
187
tooltipClass: "advanced-hint"
188
}
189
],
190
hintButtonLabel: "Got it!",
191
hintShowButton: true,
192
hintAnimation: true
193
});
194
195
// Add and display hints
196
await intro.addHints();
197
await intro.showHints();
198
```
199
200
### Hint Positioning
201
202
Control where hint indicators and tooltips appear.
203
204
**Usage Examples:**
205
206
```typescript
207
// Different hint positions
208
introJs().setOptions({
209
hints: [
210
{
211
element: "#top-left-element",
212
hint: "Top-left positioned hint",
213
hintPosition: "top-left"
214
},
215
{
216
element: "#center-element",
217
hint: "Center positioned hint",
218
hintPosition: "middle-middle"
219
},
220
{
221
element: "#bottom-right-element",
222
hint: "Bottom-right positioned hint",
223
hintPosition: "bottom-right"
224
}
225
]
226
});
227
```
228
229
### Hint Styling
230
231
Apply custom styling to individual hints.
232
233
**Usage Examples:**
234
235
```typescript
236
// Custom styled hints
237
introJs().setOptions({
238
hints: [
239
{
240
element: "#important-feature",
241
hint: "This is a critical feature",
242
tooltipClass: "important-hint red-border",
243
hintPosition: "top-middle"
244
},
245
{
246
element: "#new-feature",
247
hint: "Check out this new feature!",
248
tooltipClass: "new-feature-hint pulse",
249
hintPosition: "bottom-left"
250
}
251
]
252
});
253
```
254
255
### Hint Animation Control
256
257
Control animation behavior for individual hints.
258
259
**Usage Examples:**
260
261
```typescript
262
// Mix of animated and static hints
263
introJs().setOptions({
264
hints: [
265
{
266
element: "#animated-feature",
267
hint: "This hint will animate",
268
hintAnimation: true,
269
hintPosition: "top-middle"
270
},
271
{
272
element: "#static-feature",
273
hint: "This hint won't animate",
274
hintAnimation: false,
275
hintPosition: "bottom-middle"
276
}
277
]
278
});
279
```
280
281
## HTML Data Attributes for Hints
282
283
Hints can be defined using HTML data attributes.
284
285
**HTML Examples:**
286
287
```html
288
<!-- Basic hint -->
289
<button data-hint="Save your work here">Save</button>
290
291
<!-- Positioned hint -->
292
<div
293
data-hint="Your dashboard overview"
294
data-hintposition="bottom-middle">
295
Dashboard
296
</div>
297
298
<!-- Styled hint -->
299
<span
300
data-hint="Important information"
301
data-hintposition="top-right"
302
data-tooltip-class="important-hint">
303
Info
304
</span>
305
```
306
307
### Complete HTML Data Attributes Reference for Hints
308
309
All HintStep properties can be configured using HTML data attributes:
310
311
| Attribute | Description | Values |
312
|-----------|-------------|---------|
313
| `data-hint` | Hint content/text | string |
314
| `data-hintposition` | Hint indicator position | HintPosition values |
315
| `data-tooltip-class` | Custom CSS class for hint tooltip | string |
316
317
## Hint Management Patterns
318
319
### Progressive Hint Disclosure
320
321
Show hints progressively based on user actions.
322
323
**Usage Examples:**
324
325
```typescript
326
const intro = introJs().setOptions({
327
hints: [
328
{ element: "#step1", hint: "Start here", hintPosition: "bottom-middle" },
329
{ element: "#step2", hint: "Then do this", hintPosition: "bottom-middle" },
330
{ element: "#step3", hint: "Finally this", hintPosition: "bottom-middle" }
331
]
332
});
333
334
// Show hints progressively
335
await intro.addHints();
336
intro.showHint(1);
337
338
// Show next hint when user completes step 1
339
document.getElementById("step1").addEventListener("click", () => {
340
intro.hideHint(1);
341
intro.showHint(2);
342
});
343
```
344
345
### Contextual Hint Management
346
347
Show/hide hints based on application state.
348
349
**Usage Examples:**
350
351
```typescript
352
// Show hints when user enters specific mode
353
function enterAdvancedMode() {
354
const intro = introJs().setOptions({
355
hints: [
356
{ element: "#advanced-tool1", hint: "Advanced tool 1", hintPosition: "top-middle" },
357
{ element: "#advanced-tool2", hint: "Advanced tool 2", hintPosition: "bottom-middle" }
358
]
359
});
360
361
intro.addHints().then(() => intro.showHints());
362
}
363
364
// Hide hints when leaving mode
365
function exitAdvancedMode() {
366
introJs().removeHints();
367
}
368
```
369
370
### Hint Auto-Refresh
371
372
Configure automatic hint refresh for dynamic content.
373
374
**Usage Examples:**
375
376
```typescript
377
// Enable auto-refresh for dynamic content
378
introJs().setOptions({
379
hintAutoRefreshInterval: 2000, // Refresh every 2 seconds
380
hints: [
381
{
382
element: ".dynamic-content",
383
hint: "This content updates frequently",
384
hintPosition: "top-middle"
385
}
386
]
387
});
388
389
// Disable auto-refresh
390
introJs().setOptions({
391
hintAutoRefreshInterval: -1
392
});
393
```
394
395
## Global Hint Configuration
396
397
Options that affect all hints in the instance.
398
399
**Usage Examples:**
400
401
```typescript
402
// Global hint configuration
403
introJs().setOptions({
404
hintPosition: "top-middle", // Default position for all hints
405
hintButtonLabel: "I understand", // Button text in hint dialogs
406
hintShowButton: true, // Show button in hint dialogs
407
hintAutoRefreshInterval: 5000, // Auto-refresh interval in ms
408
hintAnimation: true // Enable animations for all hints
409
});
410
```