Hugging Face's logo

Spaces:
aletrn
/
driver.js
Running

App Files Community
driver.js
File size: 4,081 Bytes 
1f05ebf
 
 
 
 
 
 
 
 
 
 
 
 
 
4b04f2c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1f05ebf
4b04f2c
 
 
1f05ebf
4b04f2c
 
 
 
 
 
 
 
 
1f05ebf
4b04f2c
1f05ebf
4b04f2c
 
 
 
 
 
 
 
 
 
 
 
1f05ebf
4b04f2c
 
 
 
1f05ebf
4b04f2c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
---
title: "Styling Popover"
groupTitle: "Examples"
sort: 10
---

import { CodeSample } from "../../components/CodeSample.tsx";

You can either use the default class names and override the styles or you can pass a custom class name to the `popoverClass` option either globally or per step.

Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRendered` callback to get the popover DOM element and do whatever you want with it.

We have added a few examples below but have a look at the [theming section](/docs/theming#styling-popover) for detailed guide including class names to target etc.

<CodeSample
  heading="Using CSS"
  buttonText={"Driver.js Website Theme"}
  config={{
    prevBtnText: '&larr; Previous',
    nextBtnText: 'Next &rarr;',
    doneBtnText: 'Done',
    showButtons: ['next', 'previous'],
    popoverClass: 'driverjs-theme'
  }}
  tour={[
    {
      element: '#demo-theme',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'h1',
      popover: {
        align: 'start',
        side: 'bottom',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'p a',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    }
  ]}
  id={"demo-theme"}
  client:load
>
  ```js
  import { driver } from "driver.js";
  import "driver.js/dist/driver.css";

  const driverObj = driver({
    popoverClass: 'driverjs-theme'
  });

    driverObj.highlight({
    element: '#demo-theme',
    popover: {
      title: 'Style However You Want',
      description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
    }
  });
  ```
</CodeSample>

<br/>

<CodeSample
  heading="Using Hook"
  buttonText={"Driver.js Website Theme"}
  config={{
    prevBtnText: '&larr; Previous',
    nextBtnText: 'Next &rarr;',
    doneBtnText: 'Done',
    showButtons: ['next', 'previous'],
  }}
  tour={[
    {
      element: '#demo-hook-theme',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'h1',
      popover: {
        align: 'start',
        side: 'bottom',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'p a',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    }
  ]}
  id={"demo-hook-theme"}
  client:load
>
  ```js
  import { driver } from "driver.js";
  import "driver.js/dist/driver.css";

  const driverObj = driver({
  popoverClass: 'driverjs-theme'
});

  driverObj.highlight({
  element: '#demo-theme',
  popover: {
  title: 'Style However You Want',
  description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
}
});
  ```
</CodeSample>