https://www.notion.so/Step-by-Step-to-Guide-driver-js-ce20d85e86db4bceb2200cf886cd3b33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
const driver = new Driver({
className: 'scoped-class',
animate: true,
opacity: 0.75,
padding: 10,
allowClose: true,
overlayClickNext: false,
doneBtnText: 'Done',
closeBtnText: 'Close',
stageBackground: '#ffffff',
nextBtnText: 'Next',
prevBtnText: 'Previous',
showButtons: false,
keyboardControl: true,
scrollIntoViewOptions: {},
onHighlightStarted: (Element) => {},
onHighlighted: (Element) => {},
onDeselected: (Element) => {},
onReset: (Element) => {},
onNext: (Element) => {},
onPrevious: (Element) => {},
});
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
className: 'first-step-popover-class',
title: 'Title on Popover',
description: 'Body of the popover',
position: 'left'
}
},
{
element: '#second-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'top'
}
},
{
element: '#third-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'right'
}
},
]);
driver.start();
Just highlight some elements like below.
1
2
3
4
5
6
7
8
9
10
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
position: 'left',
offset: 20,
}
});