\n```\n\n## Start Using\nOnce installed, you can import the package in your project. The following example shows how to highlight an element:\n\n```js\nimport { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\n\nconst driverObj = driver();\ndriverObj.highlight({\n element: \"#some-element\",\n popover: {\n title: \"Title\",\n description: \"Description\"\n }\n});\n```\n\n### Note on CDN\n\nIf you are using the CDN, you will have to use the package from the `window` object:\n\n```js\nconst driver = window.driver.js.driver;\n\nconst driverObj = driver();\n\ndriverObj.highlight({\n element: \"#some-element\",\n popover: {\n title: \"Title\",\n description: \"Description\"\n }\n});\n```\n\nContinue reading the [Getting Started](/docs/basic-usage) guide to learn more about the package."],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Introduction"],"title":[0,"Installation"],"sort":[0,1]}],"render":[0,null]}],[0,{"id":[0,"basic-usage.mdx"],"slug":[0,"basic-usage"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nOnce installed, you can import and start using the library. There are several different configuration options available to customize the library. You can find more details about the options in the [configuration section](/docs/configuration). Given below are the basic steps to get started.\n\nHere is a simple example of how to create a tour with multiple steps.\n\n\n```js\nimport { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\n\nconst driverObj = driver({\n showProgress: true,\n steps: [\n { element: '.page-header', popover: { title: 'Title', description: 'Description' } },\n { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },\n { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },\n { element: '.footer', popover: { title: 'Title', description: 'Description' } },\n ]\n});\n\ndriverObj.drive();\n```\n\n\nYou can pass a single step configuration to the `highlight` method to highlight a single element. Given below is a simple example of how to highlight a single element.\n\n\n```js\nimport { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\n\nconst driverObj = driver();\ndriverObj.highlight({\n element: '#some-element',\n popover: {\n title: 'Title for the Popover',\n description: 'Description for it',\n },\n});\n```\n\n\nThe same configuration passed to the `highlight` method can be used to create a tour. Given below is a simple example of how to create a tour with a single step.\n\nExamples above show the basic usage of the library. Find more details about the configuration options in the [configuration section](/docs/configuration) and the examples in the [examples section](/docs/examples)."],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Introduction"],"title":[0,"Basic Usage"],"sort":[0,2]}],"render":[0,null]}],[0,{"id":[0,"configuration.mdx"],"slug":[0,"configuration"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nDriver.js is built to be highly configurable. You can configure the driver globally, or per step. You can also configure the driver on the fly, while it's running.\n\n> Driver.js is written in TypeScript. Configuration options are mostly self-explanatory. Also, if you're using an IDE like WebStorm or VSCode, you'll get autocomplete and documentation for all the configuration options.\n\n## Driver Configuration\n\nYou can configure the driver globally by passing the configuration object to the `driver` call or by using the `setConfig` method. Given below are some of the available configuration options.\n\n```typescript\ntype Config = {\n // Array of steps to highlight. You should pass\n // this when you want to setup a product tour.\n steps?: DriveStep[];\n\n // Whether to animate the product tour. (default: true)\n animate?: boolean;\n // Overlay color. (default: black)\n // This is useful when you have a dark background\n // and want to highlight elements with a light\n // background color.\n overlayColor?: string;\n // Whether to smooth scroll to the highlighted element. (default: false)\n smoothScroll?: boolean;\n // Whether to allow closing the popover by clicking on the backdrop. (default: true)\n allowClose?: boolean;\n // Opacity of the backdrop. (default: 0.5)\n overlayOpacity?: number;\n // Distance between the highlighted element and the cutout. (default: 10)\n stagePadding?: number;\n // Radius of the cutout around the highlighted element. (default: 5)\n stageRadius?: number;\n\n // Whether to allow keyboard navigation. (default: true)\n allowKeyboardControl?: boolean;\n\n // Whether to disable interaction with the highlighted element. (default: false)\n // Can be configured at the step level as well\n disableActiveInteraction?: boolean;\n\n // If you want to add custom class to the popover\n popoverClass?: string;\n // Distance between the popover and the highlighted element. (default: 10)\n popoverOffset?: number;\n // Array of buttons to show in the popover. Defaults to [\"next\", \"previous\", \"close\"]\n // for product tours and [] for single element highlighting.\n showButtons?: AllowedButtons[];\n // Array of buttons to disable. This is useful when you want to show some of the\n // buttons, but disable some of them.\n disableButtons?: AllowedButtons[];\n\n // Whether to show the progress text in popover. (default: false)\n showProgress?: boolean;\n // Template for the progress text. You can use the following placeholders in the template:\n // - {{current}}: The current step number\n // - {{total}}: Total number of steps\n progressText?: string;\n\n // Text to show in the buttons. `doneBtnText`\n // is used on the last step of a tour.\n nextBtnText?: string;\n prevBtnText?: string;\n doneBtnText?: string;\n\n // Called after the popover is rendered.\n // PopoverDOM is an object with references to\n // the popover DOM elements such as buttons\n // title, descriptions, body, container etc.\n onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;\n\n // Hooks to run before and after highlighting\n // each step. Each hook receives the following\n // parameters:\n // - element: The target DOM element of the step\n // - step: The step object configured for the step\n // - options.config: The current configuration options\n // - options.state: The current state of the driver\n onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n\n // Hooks to run before and after the driver\n // is destroyed. Each hook receives\n // the following parameters:\n // - element: Currently active element\n // - step: The step object configured for the currently active\n // - options.config: The current configuration options\n // - options.state: The current state of the driver\n onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n\n // Hooks to run on button clicks. Each hook receives\n // the following parameters:\n // - element: The current DOM element of the step\n // - step: The step object configured for the step\n // - options.config: The current configuration options\n // - options.state: The current state of the driver\n onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n};\n```\n\n> **Note**: By overriding `onNextClick`, and `onPrevClick` hooks you control the navigation of the driver. This means that user won't be able to navigate using the buttons and you will have to either call `driverObj.moveNext()` or `driverObj.movePrevious()` to navigate to the next/previous step.\n>\n> You can use this to implement custom logic for navigating between steps. This is also useful when you are dealing with dynamic content and want to highlight the next/previous element based on some logic.\n>\n> `onNextClick` and `onPrevClick` hooks can be configured at the step level as well. When configured at the driver level, you control the navigation for all the steps. When configured at the step level, you control the navigation for that particular step only.\n\n## Popover Configuration\n\nThe popover is the main UI element of Driver.js. It's the element that highlights the target element, and shows the step content. You can configure the popover globally, or per step. Given below are some of the available configuration options.\n\n```typescript\ntype Popover = {\n // Title and descriptions shown in the popover.\n // You can use HTML in these. Also, you can\n // omit one of these to show only the other.\n title?: string;\n description?: string;\n\n // The position and alignment of the popover\n // relative to the target element.\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n\n // Array of buttons to show in the popover.\n // When highlighting a single element, there\n // are no buttons by default. When showing\n // a tour, the default buttons are \"next\",\n // \"previous\" and \"close\".\n showButtons?: (\"next\" | \"previous\" | \"close\")[];\n // An array of buttons to disable. This is\n // useful when you want to show some of the\n // buttons, but disable some of them.\n disableButtons?: (\"next\" | \"previous\" | \"close\")[];\n\n // Text to show in the buttons. `doneBtnText`\n // is used on the last step of a tour.\n nextBtnText?: string;\n prevBtnText?: string;\n doneBtnText?: string;\n\n // Whether to show the progress text in popover.\n showProgress?: boolean;\n // Template for the progress text. You can use\n // the following placeholders in the template:\n // - {{current}}: The current step number\n // - {{total}}: Total number of steps\n // Defaults to following if `showProgress` is true:\n // - \"{{current}} of {{total}}\"\n progressText?: string;\n\n // Custom class to add to the popover element.\n // This can be used to style the popover.\n popoverClass?: string;\n\n // Hook to run after the popover is rendered.\n // You can modify the popover element here.\n // Parameter is an object with references to\n // the popover DOM elements such as buttons\n // title, descriptions, body, etc.\n onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;\n\n // Callbacks for button clicks. You can use\n // these to add custom behavior to the buttons.\n // Each callback receives the following parameters:\n // - element: The current DOM element of the step\n // - step: The step object configured for the step\n // - options.config: The current configuration options\n // - options.state: The current state of the driver\n onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void\n onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void\n onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void\n}\n```\n\n## Drive Step Configuration\n\nDrive step is the configuration object passed to the `highlight` method or the `steps` array of the `drive` method. You can configure the popover and the target element for each step. Given below are some of the available configuration options.\n\n```typescript\ntype DriveStep = {\n // The target element to highlight.\n // This can be a DOM element, or a CSS selector.\n // If this is a selector, the first matching\n // element will be highlighted.\n element: Element | string;\n\n // The popover configuration for this step.\n // Look at the Popover Configuration section\n popover?: Popover;\n\n // Whether to disable interaction with the highlighted element. (default: false)\n disableActiveInteraction?: boolean;\n\n // Callback when the current step is deselected,\n // about to be highlighted or highlighted.\n // Each callback receives the following parameters:\n // - element: The current DOM element of the step\n // - step: The step object configured for the step\n // - options.config: The current configuration options\n // - options.state: The current state of the driver\n onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n}\n```\n\n## State\n\nYou can access the current state of the driver by calling the `getState` method. It's also passed to the hooks and callbacks.\n\n```typescript\ntype State = {\n // Whether the driver is currently active or not\n isInitialized?: boolean;\n\n // Index of the currently active step if using\n // as a product tour and have configured the\n // steps array.\n activeIndex?: number;\n // DOM element of the currently active step\n activeElement?: Element;\n // Step object of the currently active step\n activeStep?: DriveStep;\n\n // DOM element that was previously active\n previousElement?: Element;\n // Step object of the previously active step\n previousStep?: DriveStep;\n\n // DOM elements for the popover i.e. including\n // container, title, description, buttons etc.\n popover?: PopoverDOM;\n}\n```"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Introduction"],"title":[0,"Configuration"],"sort":[0,3]}],"render":[0,null]}],[0,{"id":[0,"api.mdx"],"slug":[0,"api"],"body":[0,"\nHere is the list of methods provided by `driver` when you initialize it.\n\n> **Note:** We have omitted the configuration options for brevity. Please look at the configuration section for the options. Links are provided in the description below.\n\n```javascript\nimport { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\n\n// Look at the configuration section for the options\n// https://driverjs.com/docs/configuration#driver-configuration\nconst driverObj = driver({ /* ... */ });\n\n// --------------------------------------------------\n// driverObj is an object with the following methods\n// --------------------------------------------------\n\n// Start the tour using `steps` given in the configuration\ndriverObj.drive(); // Starts at step 0\ndriverObj.drive(4); // Starts at step 4\n\ndriverObj.moveNext(); // Move to the next step\ndriverObj.movePrevious(); // Move to the previous step\ndriverObj.moveTo(4); // Move to the step 4\ndriverObj.hasNextStep(); // Is there a next step\ndriverObj.hasPreviousStep() // Is there a previous step\n\ndriverObj.isFirstStep(); // Is the current step the first step\ndriverObj.isLastStep(); // Is the current step the last step\n\ndriverObj.getActiveIndex(); // Gets the active step index\n\ndriverObj.getActiveStep(); // Gets the active step configuration\ndriverObj.getPreviousStep(); // Gets the previous step configuration\ndriverObj.getActiveElement(); // Gets the active HTML element\ndriverObj.getPreviousElement(); // Gets the previous HTML element\n\n// Is the tour or highlight currently active\ndriverObj.isActive();\n\n// Recalculate and redraw the highlight\ndriverObj.refresh();\n\n// Look at the configuration section for configuration options\n// https://driverjs.com/docs/configuration#driver-configuration\ndriverObj.getConfig();\ndriverObj.setConfig({ /* ... */ });\n\ndriverObj.setSteps([ /* ... */ ]); // Set the steps\n\n// Look at the state section of configuration for format of the state\n// https://driverjs.com/docs/configuration#state\ndriverObj.getState();\n\n// Look at the DriveStep section of configuration for format of the step\n// https://driverjs.com/docs/configuration/#drive-step-configuration\ndriverObj.highlight({ /* ... */ }); // Highlight an element\n\ndriverObj.destroy(); // Destroy the tour\n```"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Introduction"],"title":[0,"API Reference"],"sort":[0,4]}],"render":[0,null]}],[0,{"id":[0,"theming.mdx"],"slug":[0,"theming"],"body":[0,"\nYou can customize the look and feel of the driver by adding custom class to popover or applying CSS to different classes used by driver.js.\n\n## Styling Popover\n\nYou can set the `popoverClass` option globally in the driver configuration or at the step level to apply custom class to the popover and then use CSS to apply styles.\n\n```js\nconst driverObj = driver({\n popoverClass: 'my-custom-popover-class'\n});\n\n// or you can also have different classes for different steps\nconst driverObj2 = driver({\n steps: [\n {\n element: '#some-element',\n popover: {\n title: 'Title',\n description: 'Description',\n popoverClass: 'my-custom-popover-class'\n }\n }\n ],\n})\n```\n\nHere is the list of classes applied to the popover which you can use in conjunction with `popoverClass` option to apply custom styles on the popover.\n\n```css\n/* Class assigned to popover wrapper */\n.driver-popover {}\n\n/* Arrow pointing towards the highlighted element */\n.driver-popover-arrow {}\n\n/* Title and description */\n.driver-popover-title {}\n.driver-popover-description {}\n\n/* Close button displayed on the top right corner */\n.driver-popover-close-btn {}\n\n/* Footer of the popover displaying progress and navigation buttons */\n.driver-popover-footer {}\n.driver-popover-progress-text {}\n.driver-popover-prev-btn {}\n.driver-popover-next-btn {}\n```\n\nVisit the [example page](/docs/styling-popover) for an example that modifies the popover styles.\n\n## Modifying Popover DOM\n\nAlternatively, you can also use the `onPopoverRender` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.\n\n```typescript\ntype PopoverDOM = {\n wrapper: HTMLElement;\n arrow: HTMLElement;\n title: HTMLElement;\n description: HTMLElement;\n footer: HTMLElement;\n progress: HTMLElement;\n previousButton: HTMLElement;\n nextButton: HTMLElement;\n closeButton: HTMLElement;\n footerButtons: HTMLElement;\n};\n\nonPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;\n```\n\n## Styling Page\n\nFollowing classes are applied to the page when the driver is active.\n\n```css\n/* Applied to the `body` when the driver: */\n.driver-active {} /* is active */\n.driver-fade {} /* is animated */\n.driver-simple {} /* is not animated */\n```\n\nFollowing classes are applied to the overlay i.e. the lightbox displayed over the page.\n\n```css\n.driver-overlay {}\n```\n\n## Styling Highlighted Element\n\nWhenever an element is highlighted, the following classes are applied to it.\n\n```css\n.driver-active-element {}\n```"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Introduction"],"title":[0,"Theming"],"sort":[0,5]}],"render":[0,null]}],[0,{"id":[0,"migrating-from-0x.mdx"],"slug":[0,"migrating-from-0x"],"body":[0,"\nDrivers 1.x is a major release that introduces a new API and a new architecture. This page will help you migrate your code from 0.x to 1.x.\n\n> Change in how you import the library\n```diff\n- import Driver from 'driver.js';\n- import 'driver.js/dist/driver.min.css';\n+ import { driver } from 'driver.js';\n+ import \"driver.js/dist/driver.css\";\n```\n\n> Change in how you initialize the library\n```diff\n- const driverObj = new Driver(config);\n- driverObj.setSteps(steps);\n\n+ // Steps can be passed in the constructor\n+ const driverObj = driver({\n+ ...config,\n+ steps\n+ });\n```\n\n> Changes in configuration\n\n```diff\nconst config = {\n- overlayClickNext: false, // Option has been removed\n- closeBtnText: 'Close', // Option has been removed (close button is now an icon)\n- scrollIntoViewOptions: {}, // Option has been renamed\n- opacity: 0.75,\n+ overlayOpacity: 0.75,\n- className: 'scoped-class',\n+ popoverClass: 'scoped-class',\n- padding: 10,\n+ stagePadding: 10,\n- showButtons: false,\n+ showButtons: ['next', 'prev', 'close'], // pass an array of buttons to show\n- keyboardControl: true,\n+ allowKeyboardControl: true,\n- onHighlightStarted: (Element) {},\n+ onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n- onHighlighted: (Element) {},\n+ onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n- onDeselected: (Element) {}, // Called when element has been deselected\n+ onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n\n- onReset: (Element) {}, // Called when overlay is about to be cleared\n+ onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n+ onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n+ onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n\n- onNext: (Element) => {}, // Called when moving to next step on any step\n- onPrevious: (Element) => {}, // Called when moving to next step on any step\n+ // By overriding the default onNextClick and onPrevClick, you control the flow of the driver\n+ // Visit for more details: https://driverjs.com/docs/configuration\n+ onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n+ onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n\n+ // New options added\n+ overlayColor?: string;\n+ stageRadius?: number;\n+ popoverOffset?: number;\n+ disableButtons?: [\"next\", \"prev\", \"close\"];\n+ showProgress?: boolean;\n+ progressText?: string;\n+ onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;\n}\n```\n\n> Changes in step and popover definition\n\n```diff\nconst stepDefinition = {\n popover: {\n- closeBtnText: 'Close', // Removed, close button is an icon\n- element: '.some-element', // Required\n+ element: '.some-element', // Optional, if not provided, step will be shown as modal\n- className: 'popover-class',\n+ popoverClass: string;\n- showButtons: false,\n+ showButtons: [\"next\", \"previous\", \"close\"]; // Array of buttons to show\n- title: ''; // Required\n+ title: ''; // Optional\n- description: ''; // Required\n+ description: ''; // Optional\n\n- // position can be left, left-center, left-bottom, top,\n- // top-center, top-right, right, right-center, right-bottom,\n- // bottom, bottom-center, bottom-right, mid-center\n- position: 'left',\n+ // Now you need to specify the side and align separately\n+ side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n+ align?: \"start\" | \"center\" | \"end\";\n\n+ // New options\n+ showProgress?: boolean;\n+ progressText?: string;\n+ onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;\n+ onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void\n+ onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void\n+ onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void\n }\n\n+ // New hook to control the flow of the driver\n+ onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n+ onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n+ onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;\n};\n```\n\n> Changes in API methods.\n\n```diff\n- driverObj.preventMove(); // async support is built-in, no longer need to call this\n- activeElement.getCalculatedPosition();\n- activeElement.hidePopover();\n- activeElement.showPopover();\n- activeElement.getNode();\n\n- const isActivated = driverObj.isActivated;\n+ const isActivated = driverObj.isActive();\n\n- driverObj.start(stepNumber = 0);\n+ driverObj.drive(stepNumber = 0);\n\n- driverObj.highlight(string|stepDefinition);\n+ driverObj.highlight(stepDefinition)\n\n- driverObj.reset();\n+ driverObj.destroy();\n\n- driverObj.hasHighlightedElement();\n+ typeof driverObj.getActiveElement() !== 'undefined';\n\n- driverObj.getHighlightedElement();\n+ driverObj.getActiveElement();\n\n- driverObj.getLastHighlightedElement();\n+ driverObj.getPreviousElement();\n\n+ // New options added\n+ driverObj.moveTo(stepIndex)\n+ driverObj.getActiveStep(); // returns the configured step definition\n+ driverObj.getPreviousStep(); // returns the previous step definition\n+ driverObj.isLastStep();\n+ driverObj.isFirstStep();\n+ driverObj.getState();\n+ driverObj.getConfig();\n+ driverObj.setConfig(config);\n+ driverObj.refresh();\n```\n\nPlease make sure to visit the [documentation](https://driverjs.com/docs/configuration) for more details."],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Introduction"],"title":[0,"Migrate to 1.x"],"sort":[0,6]}],"render":[0,null]}]]],"Examples":[1,[[0,{"id":[0,"animated-tour.mdx"],"slug":[0,"animated-tour"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nThe following example shows how to create a simple tour with a few steps. Click the button below the code sample to see the tour in action.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n showProgress: true,\n steps: [\n { 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' }},\n { 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' }},\n { 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' }},\n { 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' }},\n { 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' }},\n { 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' }},\n { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }\n ]\n });\n\n driverObj.drive();\n ```\n\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Animated Tour"],"sort":[0,2]}],"render":[0,null]}],[0,{"id":[0,"static-tour.mdx"],"slug":[0,"static-tour"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou 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.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n animate: false,\n showProgress: false,\n showButtons: ['next', 'previous', 'close'],\n steps: [\n { 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' }},\n { 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' }},\n { 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' }},\n { 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' }},\n { 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' }},\n { 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' }},\n { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }\n ]\n });\n\n driverObj.drive();\n ```\n\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Static Tour"],"sort":[0,2]}],"render":[0,null]}],[0,{"id":[0,"styling-popover.mdx"],"slug":[0,"styling-popover"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou 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.\n\nAlternatively, if want to modify the Popover DOM, you can use the `onPopoverRender` callback to get the popover DOM element and do whatever you want with it before popover is rendered.\n\nWe 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.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n popoverClass: 'driverjs-theme'\n });\n\n driverObj.highlight({\n element: '#demo-theme',\n popover: {\n title: 'Style However You Want',\n 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.'\n }\n });\n ```\n\n\nHere is the CSS used for the above example:\n\n```css\n.driver-popover.driverjs-theme {\n background-color: #fde047;\n color: #000;\n}\n\n.driver-popover.driverjs-theme .driver-popover-title {\n font-size: 20px;\n}\n\n.driver-popover.driverjs-theme .driver-popover-title,\n.driver-popover.driverjs-theme .driver-popover-description,\n.driver-popover.driverjs-theme .driver-popover-progress-text {\n color: #000;\n}\n\n.driver-popover.driverjs-theme button {\n flex: 1;\n text-align: center;\n background-color: #000;\n color: #ffffff;\n border: 2px solid #000;\n text-shadow: none;\n font-size: 14px;\n padding: 5px 8px;\n border-radius: 6px;\n}\n\n.driver-popover.driverjs-theme button:hover {\n background-color: #000;\n color: #ffffff;\n}\n\n.driver-popover.driverjs-theme .driver-popover-navigation-btns {\n justify-content: space-between;\n gap: 3px;\n}\n\n.driver-popover.driverjs-theme .driver-popover-close-btn {\n color: #9b9b9b;\n}\n\n.driver-popover.driverjs-theme .driver-popover-close-btn:hover {\n color: #000;\n}\n\n.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {\n border-left-color: #fde047;\n}\n\n.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {\n border-right-color: #fde047;\n}\n\n.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {\n border-top-color: #fde047;\n}\n\n.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {\n border-bottom-color: #fde047;\n}\n```\n\n \n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n // Get full control over the popover rendering.\n // Here we are adding a custom button that takes\n // the user to the first step.\n onPopoverRender: (popover, { config, state }) => {\n const firstButton = document.createElement(\"button\");\n firstButton.innerText = \"Go to First\";\n popover.footerButtons.appendChild(firstButton);\n\n firstButton.addEventListener(\"click\", () => {\n driverObj.drive(0);\n });\n },\n steps: [\n // ..\n ]\n });\n\n driverObj.drive();\n ```\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Styling Popover"],"sort":[0,2]}],"render":[0,null]}],[0,{"id":[0,"tour-progress.mdx"],"slug":[0,"tour-progress"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can use `showProgress` option to show the progress of the tour. It is shown in the bottom left corner of the screen. There is also `progressText` option which can be used to customize the text shown for the progress.\n\nPlease note that `showProgress` is `false` by default. Also the default text for `progressText` is `{{current}} of {{total}}`. You can use `{{current}}` and `{{total}}` in your `progressText` template to show the current and total steps.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n showProgress: true,\n showButtons: ['next', 'previous'],\n steps: [\n { 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' }},\n { 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' }},\n { 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' }},\n { 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' }},\n { element: 'code .line:nth-child(16)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: \"top\", align: 'start' }},\n ]\n });\n\n driverObj.drive();\n ```\n\n\n
\n\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Tour Progress"],"sort":[0,2]}],"render":[0,null]}],[0,{"id":[0,"async-tour.mdx"],"slug":[0,"async-tour"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can also have async steps in your tour. This is useful when you want to load some data from the server and then show the tour.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n showProgress: true,\n steps: [\n {\n popover: {\n title: 'First Step',\n description: 'This is the first step. Next element will be loaded dynamically.'\n // By passing onNextClick, you can override the default behavior of the next button.\n // This will prevent the driver from moving to the next step automatically.\n // You can then manually call driverObj.moveNext() to move to the next step.\n onNextClick: () => {\n // .. load element dynamically\n // .. and then call\n driverObj.moveNext();\n },\n },\n },\n {\n element: '.dynamic-el',\n popover: {\n title: 'Async Element',\n description: 'This element is loaded dynamically.'\n },\n // onDeselected is called when the element is deselected.\n // Here we are simply removing the element from the DOM.\n onDeselected: () => {\n // .. remove element\n document.querySelector(\".dynamic-el\")?.remove();\n }\n },\n { popover: { title: 'Last Step', description: 'This is the last step.' } }\n ]\n\n});\n\ndriverObj.drive();\n\n```\n\n\n> **Note**: By overriding `onNextClick`, and `onPrevClick` hooks you control the navigation of the driver. This means that user won't be able to navigate using the buttons and you will have to either call `driverObj.moveNext()` or `driverObj.movePrevious()` to navigate to the next/previous step.\n>\n> You can use this to implement custom logic for navigating between steps. This is also useful when you are dealing with dynamic content and want to highlight the next/previous element based on some logic.\n>\n> `onNextClick` and `onPrevClick` hooks can be configured at driver level as well as step level. When configured at the driver level, you control the navigation for all the steps. When configured at the step level, you control the navigation for that particular step only.\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Async Tour"],"sort":[0,3]}],"render":[0,null]}],[0,{"id":[0,"confirm-on-exit.mdx"],"slug":[0,"confirm-on-exit"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can use the `onDestroyStarted` hook to add a confirmation dialog or some other logic when the user tries to exit the tour. In the example below, upon exit we check if there are any tour steps left and ask for confirmation before we exit.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n showProgress: true,\n steps: [\n { element: '#confirm-destroy-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' }},\n { 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' }},\n { 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' }},\n { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }\n ],\n // onDestroyStarted is called when the user tries to exit the tour\n onDestroyStarted: () => {\n if (!driverObj.hasNextStep() || confirm(\"Are you sure?\")) {\n driverObj.destroy();\n }\n },\n });\n\n driverObj.drive();\n ```\n\n\n> **Note:** By overriding the `onDestroyStarted` hook, you are responsible for calling `driverObj.destroy()` to exit the tour."],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Confirm on Exit"],"sort":[0,3]}],"render":[0,null]}],[0,{"id":[0,"prevent-destroy.mdx"],"slug":[0,"prevent-destroy"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can also prevent the user from exiting the tour using `allowClose` option. This option is useful when you want to force the user to complete the tour before they can exit.\n\nIn the example below, you won't be able to exit the tour until you reach the last step.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n showProgress: true,\n allowClose: false,\n steps: [\n { element: '#prevent-exit', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\\'s walk you through it.', side: \"left\", align: 'start' }},\n { 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' }},\n { 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' }},\n { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }\n ],\n });\n\n driverObj.drive();\n ```\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Prevent Tour Exit"],"sort":[0,3]}],"render":[0,null]}],[0,{"id":[0,"styling-overlay.mdx"],"slug":[0,"styling-overlay"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can customize the overlay opacity and color using `overlayOpacity` and `overlayColor` options to change the look of the overlay.\n\n> **Note:** In the examples below we have used `highlight` method to highlight the elements. The same configuration applies to the tour steps as well.\n\n## Overlay Color\n\nHere are some driver.js examples with different overlay colors.\n\n```js\nimport { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\n\nconst driverObj = driver({\n overlayColor: 'red'\n});\n\ndriverObj.highlight({\n popover: {\n title: 'Pass any RGB Color',\n description: 'Here we have set the overlay color to be red. You can pass any RGB color to overlayColor option.'\n }\n});\n```\n\n
\n \n\n \n\n \n
\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Styling Overlay"],"sort":[0,5]}],"render":[0,null]}],[0,{"id":[0,"popover-position.mdx"],"slug":[0,"popover-position"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can control the popover position using the `side` and `align` options. The `side` option controls the side of the element where the popover will be shown and the `align` option controls the alignment of the popover with the element.\n\n> **Note:** Popover is intelligent enough to adjust itself to fit in the viewport. So, if you set `side` to `left` and `align` to `start`, but the popover doesn't fit in the viewport, it will automatically adjust itself to fit in the viewport. Consider highlighting and scrolling the browser to the element below to see this in action.\n\n```js\nimport { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\n\nconst driverObj = driver();\ndriverObj.highlight({\n element: '#left-start',\n popover: {\n title: 'Animated Tour Example',\n description: 'Here is the code example showing animated tour. Let\\'s walk you through it.',\n side: \"left\",\n align: 'start'\n }\n});\n```\n\n
\n
Use the buttons below to show the popover.
\n
\n\n
\n left and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"left\",\n align: 'start'\n }\n }}\n id={\"left-start\"}\n client:load\n />\n\n left and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"left\",\n align: 'center'\n }\n }}\n id={\"left-start\"}\n client:load\n />\n\n left and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"left\",\n align: 'end'\n }\n }}\n id={\"left-start\"}\n client:load\n />\n\n top and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"top\",\n align: 'start'\n }\n }}\n id={\"top-start\"}\n client:load\n />\n\n top and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"top\",\n align: 'center'\n }\n }}\n id={\"top-start\"}\n client:load\n />\n\n top and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"top\",\n align: 'end'\n }\n }}\n id={\"top-start\"}\n client:load\n />\n\n right and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"right\",\n align: 'start'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n\n right and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"right\",\n align: 'center'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n\n right and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"right\",\n align: 'end'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n\n bottom and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"bottom\",\n align: 'start'\n }\n }}\n id={\"bottom-start\"}\n client:load\n />\n\n bottom and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"bottom\",\n align: 'center'\n }\n }}\n id={\"bottom-start\"}\n client:load\n />\n\n bottom and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"bottom\",\n align: 'end'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n
"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Popover Position"],"sort":[0,7]}],"render":[0,null]}],[0,{"id":[0,"buttons.mdx"],"slug":[0,"buttons"],"body":[0,"\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can use the `showButtons` option to choose which buttons to show in the popover. The default value is `['next', 'previous', 'close']`.\n\n
\n > **Note:** When using the `highlight` method to highlight a single element, the only button shown is the `close`\n button. However, you can use the `showButtons` option to show other buttons as well. But the buttons won't do\n anything. You will have to use the `onNextClick` and `onPreviousClick` callbacks to implement the functionality.\n
\n\n## Event Handlers\n\nYou can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to implement custom functionality when the user clicks on the next and previous buttons.\n\n> Please note that when you configure these callbacks, the default functionality of the buttons will be disabled. You will have to implement the functionality yourself.\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n onNextClick:() => {\n console.log('Next Button Clicked');\n // Implement your own functionality here\n driverObj.moveNext();\n },\n onPrevClick:() => {\n console.log('Previous Button Clicked');\n // Implement your own functionality here\n driverObj.movePrevious();\n },\n onCloseClick:() => {\n console.log('Close Button Clicked');\n // Implement your own functionality here\n driverObj.destroy();\n },\n steps: [\n // ...\n ]\n });\n\n driverObj.drive();\n ```\n\n\n## Custom Buttons\n\nYou can add custom buttons using `onPopoverRender` callback. This callback is called before the popover is rendered. In the following example, we are adding a custom button that takes the user to the first step.\n\n\n\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n // Get full control over the popover rendering.\n // Here we are adding a custom button that takes\n // user to the first step.\n onPopoverRender: (popover, { config, state }) => {\n const firstButton = document.createElement(\"button\");\n firstButton.innerText = \"Go to First\";\n popover.footerButtons.appendChild(firstButton);\n\n firstButton.addEventListener(\"click\", () => {\n driverObj.drive(0);\n });\n },\n steps: [\n // ..\n ]\n });\n\n driverObj.drive();\n ```\n"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Popover Buttons"],"sort":[0,9]}],"render":[0,null]}],[0,{"id":[0,"simple-highlight.mdx"],"slug":[0,"simple-highlight"],"body":[0,"\nimport { FormHelp } from \"../../components/FormHelp.tsx\";\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nProduct tours is not the only usecase for Driver.js. You can use it to highlight any element on the page and show a popover with a description. This is useful for providing contextual help to the user e.g. help the user fill a form or explain a feature.\n\nExample below shows how to highlight an element and simply show a popover.\n\n\n\nHere is the code for above example:\n\n```js\nconst driverObj = driver({\n popoverClass: \"driverjs-theme\",\n stagePadding: 4,\n});\n\ndriverObj.highlight({\n element: \"#highlight-me\",\n popover: {\n side: \"bottom\",\n title: \"This is a title\",\n description: \"This is a description\",\n }\n})\n```\n\nYou can also use it to show a simple modal without highlighting any element.\n\nYet another highlight example.\",\n },\n }}\n client:load\n/>\n\nHere is the code for above example:\n\n```js\nconst driverObj = driver();\n\ndriverObj.highlight({\n popover: {\n description: \"Yet another highlight example.\",\n }\n})\n```\n\nFocus on the input below and see how the popover is shown.\n\n\n\n\n\nHere is the code for the above example.\n\n```js\nconst driverObj = driver({\n popoverClass: \"driverjs-theme\",\n stagePadding: 0,\n onDestroyed: () => {\n document?.activeElement?.blur();\n }\n});\n\nconst nameEl = document.getElementById(\"name\");\nconst educationEl = document.getElementById(\"education\");\nconst ageEl = document.getElementById(\"age\");\nconst addressEl = document.getElementById(\"address\");\nconst formEl = document.querySelector(\"form\");\n\nnameEl.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: nameEl,\n popover: {\n title: \"Name\",\n description: \"Enter your name here\",\n },\n });\n});\n\neducationEl.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: educationEl,\n popover: {\n title: \"Education\",\n description: \"Enter your education here\",\n },\n });\n});\n\nageEl.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: ageEl,\n popover: {\n title: \"Age\",\n description: \"Enter your age here\",\n },\n });\n});\n\naddressEl.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: addressEl,\n popover: {\n title: \"Address\",\n description: \"Enter your address here\",\n },\n });\n});\n\nformEl.addEventListener(\"blur\", () => {\n driverObj.destroy();\n});\n```"],"collection":[0,"guides"],"data":[0,{"groupTitle":[0,"Examples"],"title":[0,"Simple Highlight"],"sort":[0,11]}],"render":[0,null]}]]]}]}" renderer-url="/_astro/client.c7955ce7.js" ssr="" uid="Z2uWIqL">
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.
Basic Static Tour
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();