diff --git a/docs/package.json b/docs/package.json
index b27fb67..580e127 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,7 +20,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.0",
- "tailwindcss": "^3.3.2"
+ "tailwindcss": "^3.0.24"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9"
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 7f3824e..fc80be7 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -36,7 +36,7 @@ dependencies:
specifier: ^1.6.0
version: 1.6.0(react-dom@18.2.0)(react@18.2.0)
tailwindcss:
- specifier: ^3.3.2
+ specifier: ^3.0.24
version: 3.3.2
devDependencies:
diff --git a/docs/src/content/guides/animated-tour.mdx b/docs/src/content/guides/animated-tour.mdx
index 5fdae45..4fc9dd5 100644
--- a/docs/src/content/guides/animated-tour.mdx
+++ b/docs/src/content/guides/animated-tour.mdx
@@ -12,6 +12,7 @@ The following example shows how to create a simple tour with a few steps. Click
heading={'Basic Animated Tour'}
config={{
animate: true,
+ showProgress: true,
showButtons: ['next', 'previous'],
}}
tour={[
@@ -20,6 +21,7 @@ The following example shows how to create a simple tour with a few steps. Click
{ element: '.line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
{ element: '.line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
{ element: '.line:nth-child(17)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
+ { element: '.line:nth-child(5)', popover: { title: 'Hide Progress', description: 'Progress shown in the bottom left is hidden by default. You can make driver show/hide the progress using this option.', side: "top", align: 'start' }},
{ element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
{ popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
]}
diff --git a/docs/src/content/guides/static-tour.mdx b/docs/src/content/guides/static-tour.mdx
new file mode 100644
index 0000000..599597e
--- /dev/null
+++ b/docs/src/content/guides/static-tour.mdx
@@ -0,0 +1,52 @@
+---
+title: "Static Tour"
+groupTitle: "Examples"
+sort: 2
+---
+
+import { CodeSample } from "../../components/CodeSample.tsx";
+
+You can simply set `animate` option to `false` to make the tour static. This will make the tour not animate between steps and will just show the popover.
+
+
+ ```js
+ import { driver } from "driver.js";
+ import "driver.js/dist/driver.css";
+
+ const driverObj = driver({
+ animate: false,
+ showProgress: false,
+ showButtons: ['next', 'previous', 'close'],
+ steps: [
+ { element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
+ { element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
+ { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
+ { element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
+ { element: 'code .line:nth-child(18)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
+ { element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
+ { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
+ ]
+ });
+
+ driver.drive();
+ ```
+
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index 4c45937..54d55fd 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -11,19 +11,19 @@ const starCount = getFormattedStars('kamranahmedse/driver.js');
-
+
-
driver.js
-
Product tours, highlights, contextual help and more.
-
-
+
driver.js
+
Product tours, highlights, contextual help and more.
