|
--- |
|
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. |
|
|
|
<CodeSample |
|
heading={'Basic Static Tour'} |
|
config={{ |
|
animate: false, |
|
showProgress: false, |
|
showButtons: ['next', 'previous'], |
|
}} |
|
tour={[ |
|
{ 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: '.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: '.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(19)', 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(6)', 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: '#docs-sidebar 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.' } } |
|
]} |
|
id={"tour-example"} |
|
client:load |
|
> |
|
```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: '#docs-sidebar 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.' } } |
|
] |
|
}); |
|
|
|
driverObj.drive(); |
|
``` |
|
</CodeSample> |
|
|
