### Install and Run Playground

Source: https://github.com/nilbuild/driver.js/blob/master/readme.md

Commands to install dependencies, install playground dependencies, and start the development server for local development.

```sh
pnpm install
pnpm run playground:install
pnpm dev
```

--------------------------------

### Start Tour

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Starts the tour. You can optionally specify a step index to begin the tour from a specific step.

```APIDOC
## Start Tour

### Description
Starts the tour. You can optionally specify a step index to begin the tour from a specific step.

### Method
`drive()`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
driverObj.drive();  // Starts at step 0
driverObj.drive(4); // Starts at step 4
```

### Response
#### Success Response
This method does not return a value.

#### Response Example
None
```

--------------------------------

### Start Driver Tour

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

The `driverObj.start()` method has been renamed to `driverObj.drive()` for starting the tour.

```javascript
driverObj.drive(stepNumber = 0);
```

--------------------------------

### Basic Tour Example with Driver.js

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/basic-usage.mdx

Create a multi-step product tour by configuring an array of steps. Ensure you import the library and its CSS. This example demonstrates basic tour creation with progress indication.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
    { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
    { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
    { element: '.footer', popover: { title: 'Title', description: 'Description' } },
  ]
});

driverObj.drive();
```

--------------------------------

### Install Driver.js with npm

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/installation.mdx

Use npm to install the Driver.js package. This is a common method for Node.js projects.

```bash
npm install driver.js
```

--------------------------------

### Install Driver.js with pnpm

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/installation.mdx

Use pnpm to install the Driver.js package. pnpm is a fast, disk-space-efficient package manager.

```bash
pnpm install driver.js
```

--------------------------------

### Configuration Methods

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Methods for getting and setting the driver configuration and steps.

```APIDOC
## Configuration Methods

### Description
Methods for getting and setting the driver configuration and steps.

### Method
`getConfig()`, `setConfig(config)`, `setSteps(steps)`

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
driverObj.getConfig();
driverObj.setConfig({ /* ... */ });
driverObj.setSteps([ /* ... */ ]); // Set the steps
```

### Response
#### Success Response
`getConfig()` returns the current configuration object. `setConfig()` and `setSteps()` do not return a value.

#### Response Example
`{}` (for `getConfig`)
None (for `setConfig` and `setSteps`)
```

--------------------------------

### Basic Animated Tour with Driver.js

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/animated-tour.mdx

This snippet shows how to initialize and start a basic animated tour. It includes importing the library and CSS, creating a driver instance with steps, and initiating the tour.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  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.' } }
  ]
});

driverObj.drive();
```

--------------------------------

### Popover Positioning Options (Top Start)

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/popover-position.mdx

Demonstrates positioning a popover to the top and aligned to the start of the target element. HTML is supported in popover titles and descriptions.

```javascript
{
  element: "#sample-box",
  popover: {
    title: "Top Start Example",
    description:
      "We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.",
    side: "top",
    align: "start",
  }
}
```

--------------------------------

### Popover Positioning Options (Left Start)

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/popover-position.mdx

Demonstrates positioning a popover to the left and aligned to the start of the target element. HTML is supported in popover titles and descriptions.

```javascript
{
  element: '#sample-box',
  popover: {
    title: 'Left Start Example',
    description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
    side: "left",
    align: 'start'
  }
}
```

--------------------------------

### Basic Static Tour Configuration

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/static-tour.mdx

Configure Driver.js for a static tour by setting 'animate' to false. This example also hides progress indicators and customizes navigation buttons.

```javascript
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();
```

--------------------------------

### Popover Positioning Options (Right Start)

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/popover-position.mdx

Demonstrates positioning a popover to the right and aligned to the start of the target element. HTML is supported in popover titles and descriptions.

```javascript
{
  element: "#sample-box",
  popover: {
    title: "Right Start Example",
    description:
      "We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.",
    side: "right",
    align: "start",
  }
}
```

--------------------------------

### Control Tour Progression

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Methods to start, navigate, and check the status of tour steps. You can start the tour at a specific step or move through it sequentially.

```javascript
// Start the tour using `steps` given in the configuration
driverObj.drive();  // Starts at step 0
driverObj.drive(4); // Starts at step 4

driverObj.moveNext(); // Move to the next step
driverObj.movePrevious(); // Move to the previous step
driverObj.moveTo(4); // Move to the step 4
driverObj.hasNextStep(); // Is there a next step
driverObj.hasPreviousStep() // Is there a previous step

driverObj.isFirstStep(); // Is the current step the first step
driverObj.isLastStep(); // Is the current step the last step
```

--------------------------------

### Highlight Element with Driver.js (npm/yarn/pnpm)

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/installation.mdx

Import and use the driver function to highlight an element after installing via npm, yarn, or pnpm. Ensure you also import the CSS.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});
```

--------------------------------

### Bottom Start Popover

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/popover-position.mdx

Positions the popover below the target element and aligns its start with the target's start. Supports HTML in title and description.

```javascript
  <CodeSample
    buttonText={"Bottom Start"}
    highlight={{
      element: "#sample-box",
      popover: {
        title: "Bottom Start Example",
        description:
          "We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.",
        side: "bottom",
        align: "start",
      },
    }}
    id={"bottom-start"}
    client:load
  />
```

--------------------------------

### Asynchronous Tour with Custom Navigation

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/async-tour.mdx

This example demonstrates an asynchronous tour where navigation is manually controlled. It shows how to override the default `onNextClick` behavior to perform actions like loading dynamic content before moving to the next step, and how `onDeselected` can be used to clean up dynamically added elements.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      popover: {
        title: 'First Step',
        description: 'This is the first step. Next element will be loaded dynamically.'
        // By passing onNextClick, you can override the default behavior of the next button.
        // This will prevent the driver from moving to the next step automatically.
        // You can then manually call driverObj.moveNext() to move to the next step.
        onNextClick: () => {
          // .. load element dynamically
          // .. and then call
          driverObj.moveNext();
        },
      },
    },
    {
      element: '.dynamic-el',
      popover: {
        title: 'Async Element',
        description: 'This element is loaded dynamically.'
      },
      // onDeselected is called when the element is deselected.
      // Here we are simply removing the element from the DOM.
      onDeselected: () => {
        // .. remove element
        document.querySelector(".dynamic-el")?.remove();
      }
    },
    { popover: { title: 'Last Step', description: 'This is the last step.' } }
  ]

});

driverObj.drive();

```

--------------------------------

### Highlight Element with Popover (Left Start)

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/popover-position.mdx

Use this to highlight a specific element and display a popover positioned to its left, aligned to the start. The popover content can include HTML.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();
driverObj.highlight({
  element: "#left-start",
  popover: {
    title: "Animated Tour Example",
    description: "Here is the code example showing animated tour. Let's walk you through it.",
    side: "left",
    align: "start",
  },
});
```

--------------------------------

### Contextual Help for Form Fields

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/simple-highlight.mdx

Provide contextual help for form fields by highlighting them on focus and displaying relevant popovers. This example sets up event listeners for multiple input fields and cleans up on form blur.

```javascript
const driverObj = driver({
  popoverClass: "driverjs-theme",
  stagePadding: 0,
  onDestroyed: () => {
    document?.activeElement?.blur();
  }
});

const nameEl = document.getElementById("name");
const educationEl = document.getElementById("education");
const ageEl = document.getElementById("age");
const addressEl = document.getElementById("address");
const formEl = document.querySelector("form");

nameEl.addEventListener("focus", () => {
  driverObj.highlight({
    element: nameEl,
    popover: {
      title: "Name",
      description: "Enter your name here",
    },
  });
});

educationEl.addEventListener("focus", () => {
  driverObj.highlight({
    element: educationEl,
    popover: {
      title: "Education",
      description: "Enter your education here",
    },
  });
});

ageEl.addEventListener("focus", () => {
  driverObj.highlight({
    element: ageEl,
    popover: {
      title: "Age",
      description: "Enter your age here",
    },
  });
});

addressEl.addEventListener("focus", () => {
  driverObj.highlight({
    element: addressEl,
    popover: {
      title: "Address",
      description: "Enter your address here",
    },
  });
});

formEl.addEventListener("blur", () => {
  driverObj.destroy();
});
```

--------------------------------

### Install Driver.js with yarn

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/installation.mdx

Use yarn to add the Driver.js package to your project. yarn is another popular JavaScript package manager.

```bash
yarn add driver.js
```

--------------------------------

### Fast Animation Duration Example

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/animated-tour.mdx

Use a low `duration` value (e.g., 150ms) for a snappy tour experience where highlights and popovers appear quickly. This is useful for tours where you want to move users through information rapidly.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  // Speed the whole transition up to 150ms (default is 400ms)
  duration: 150,
  showProgress: true,
  steps: [
    { element: '#some-element', popover: { title: 'Import the Library', description: 'Notice how quickly the highlight snaps over to this line.' }},
    { element: '#another-element', popover: { title: 'Create Driver', description: 'The popover fades in almost instantly at this speed.' }},
    { element: '#yet-another-element', popover: { title: 'Fast Duration', description: 'A low duration makes the whole tour feel snappy.' }},
  ]
});

driverObj.drive();
```

--------------------------------

### Get State

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Retrieves the current state of the driver instance.

```APIDOC
## Get State

### Description
Retrieves the current state of the driver instance.

### Method
`getState()`

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
driverObj.getState();
```

### Response
#### Success Response
Returns the current state of the driver. Refer to the configuration documentation for the state format.

#### Response Example
`{}`
```

--------------------------------

### Get Active Step Information

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Retrieve information about the current, previous, or next step, as well as the active step's configuration and associated HTML element.

```APIDOC
## Get Active Step Information

### Description
Retrieve information about the current, previous, or next step, as well as the active step's configuration and associated HTML element.

### Method
`getActiveIndex()`, `getActiveStep()`, `getPreviousStep()`, `getNextStep()`, `getActiveElement()`, `getPreviousElement()`

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
driverObj.getActiveIndex(); // Gets the active step index
driverObj.getActiveStep(); // Gets the active step configuration
driverObj.getPreviousStep(); // Gets the previous step configuration
driverObj.getNextStep(); // Gets the next step configuration
driverObj.getActiveElement(); // Gets the active HTML element
driverObj.getPreviousElement(); // Gets the previous HTML element
```

### Response
#### Success Response
Returns the index, step configuration, or HTML element as appropriate.

#### Response Example
`0` (for `getActiveIndex`)
`{ element: '#some-id', popover: { title: '...' } }` (for step methods)
`<HTMLElement>` (for element methods)
```

--------------------------------

### Confirm on Exit with onDestroyStarted

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/confirm-on-exit.mdx

Use the `onDestroyStarted` hook to intercept tour exit attempts. This example checks if there are remaining steps and prompts the user for confirmation before destroying the tour. You are responsible for calling `driverObj.destroy()` within this hook.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { 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' }},
    { 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' }},
    { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
  ],
  // onDestroyStarted is called when the user tries to exit the tour
  onDestroyStarted: () => {
    if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
      driverObj.destroy();
    }
  },
});

driverObj.drive();

```

--------------------------------

### Add Custom Button to Popover

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/buttons.mdx

Use the onPopoverRender callback to programmatically add custom buttons to Driver.js popovers. This example adds a 'Go to First' button that navigates the user to the first step of the tour.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  // Get full control over the popover rendering.
  // Here we are adding a custom button that takes
  // user to the first step.
  onPopoverRender: (popover, { config, state }) => {
    const firstButton = document.createElement("button");
    firstButton.innerText = "Go to First";
    // Add this class to give the button the default driver.js styling.
    // Leave it out if you want to apply your own styles instead.
    firstButton.classList.add("driver-popover-footer-btn");
    popover.footerButtons.appendChild(firstButton);

    firstButton.addEventListener("click", () => {
      driverObj.drive(0);
    });
  },
  steps: [
    // ..
  ]
});

driverObj.drive();

```

--------------------------------

### Slow Animation Duration Example

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/animated-tour.mdx

Set a higher `duration` value (e.g., 1200ms) to slow down the tour animations, making the highlight glide slowly and popovers fade in over a longer period. This can provide a more relaxed user experience.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  // Slow the whole transition down to 1200ms (default is 400ms)
  duration: 1200,
  showProgress: true,
  steps: [
    { element: '#some-element', popover: { title: 'Import the Library', description: 'Notice how slowly the highlight glides over to this line.' }},
    { element: '#another-element', popover: { title: 'Create Driver', description: 'The popover fade-in runs over the same duration as the slide.' }},
    { element: '#yet-another-element', popover: { title: 'Slow Duration', description: 'This is the duration option that controls the whole transition.' }},
  ]
});

driverObj.drive();
```

--------------------------------

### Using CSS for Popover Styling

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/styling-popover.mdx

Apply custom styles to the Driver.js popover by assigning a class name via the `popoverClass` option. This example demonstrates how to use a custom class to override default styles.

```javascript
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.'
  }
});
```

```css
.driver-popover.driverjs-theme {
  background-color: #fde047;
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #000;
}

.driver-popover.driverjs-theme button {
  flex: 1;
  text-align: center;
  background-color: #000;
  color: #ffffff;
  border: 2px solid #000;
  text-shadow: none;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

.driver-popover.driverjs-theme button:hover {
  background-color: #000;
  color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  justify-content: space-between;
  gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
  color: #9b9b9b;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #fde047;
}
```

--------------------------------

### Initialize Driver.js 1.x with Steps

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

Learn how to initialize the Driver.js library in version 1.x, including passing steps directly in the constructor.

```diff
- const driverObj = new Driver(config);
- driverObj.setSteps(steps);

+ // Steps can be passed in the constructor
+ const driverObj = driver({
+   ...config,
+   steps
+ });
```

--------------------------------

### Initialize Driver.js

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Import and initialize the Driver.js library. Ensure you also import the necessary CSS. Configuration options are detailed in the configuration section.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

// Look at the configuration section for the options
// https://driverjs.com/docs/configuration#driver-configuration
const driverObj = driver({ /* ... */ });
```

--------------------------------

### Build and Test Scripts

Source: https://github.com/nilbuild/driver.js/blob/master/readme.md

Useful scripts for building the project and running tests.

```sh
pnpm build
pnpm test
```

--------------------------------

### Get Last Highlighted Element

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

The `driverObj.getLastHighlightedElement()` method is now `driverObj.getPreviousElement()`.

```javascript
driverObj.getPreviousElement();
```

--------------------------------

### Access Step and Element Information

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Retrieve details about the current, previous, and next steps, as well as the associated HTML elements. This is useful for understanding the current context of the tour.

```javascript
driverObj.getActiveIndex(); // Gets the active step index

driverObj.getActiveStep(); // Gets the active step configuration
driverObj.getPreviousStep(); // Gets the previous step configuration
driverObj.getNextStep(); // Gets the next step configuration
driverObj.getActiveElement(); // Gets the active HTML element
driverObj.getPreviousElement(); // Gets the previous HTML element
```

--------------------------------

### Get Highlighted Element

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

Use `driverObj.getActiveElement()` to retrieve the currently highlighted element, replacing `driverObj.getHighlightedElement()`.

```javascript
driverObj.getActiveElement();
```

--------------------------------

### Driver.js 1.x Configuration Changes

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

Compare configuration options between Driver.js 0.x and 1.x, noting removed, renamed, and new options.

```diff
const config = {
-  overlayClickNext: false, // Option has been removed
-  closeBtnText: 'Close', // Option has been removed (close button is now an icon)
-  scrollIntoViewOptions: {},
+  overlayClickNext: false, // Option has been removed
+  closeBtnText: 'Close', // Option has been removed (close button is now an icon)
+  scrollIntoViewOptions: {},
+  opacity: 0.75,
-  opacity: 0.75,
-  className: 'scoped-class',
+  className: 'scoped-class',
+  padding: 10,
-  padding: 10,
-  showButtons: false,
+  showButtons: false,
+  keyboardControl: true,
-  keyboardControl: true,
-  onHighlightStarted: (Element) {},
+  onHighlightStarted: (Element) {},
-  onHighlighted: (Element) {},
+  onHighlighted: (Element) {},
-  onDeselected: (Element) {},
+  onDeselected: (Element) {},
-  onReset: (Element) {},        // Called when overlay is about to be cleared
+  onReset: (Element) {},        // Called when overlay is about to be cleared

-  onNext: (Element) => {},
-  onPrevious: (Element) => {},
+  // By overriding the default onNextClick and onPrevClick, you control the flow of the driver
+  // Visit for more details: https://driverjs.com/docs/configuration
+  onNextClick: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  onPrevClick: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;

+  // New options added
+  overlayColor?: string;
+  stageRadius?: number;
+  popoverOffset?: number;
+  disableButtons?: ["next", "prev", "close"];
+  showProgress?: boolean;
+  progressText?: string;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
}

const config = {
-  overlayClickNext: false, // Option has been removed
-  closeBtnText: 'Close', // Option has been removed (close button is now an icon)
-  scrollIntoViewOptions: {}, // Option has been renamed
-  opacity: 0.75,
+  overlayOpacity: 0.75,
-  className: 'scoped-class',
+  popoverClass: 'scoped-class',
-  padding: 10,
+  stagePadding: 10,
-  showButtons: false,
+  showButtons: ['next', 'prev', 'close'], // pass an array of buttons to show
-  keyboardControl: true,
+  allowKeyboardControl: true,
-  onHighlightStarted: (Element) {}, 
+  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onHighlighted: (Element) {}, 
+  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onDeselected: (Element) {}, 
+  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;

-  onReset: (Element) {},        // Called when overlay is about to be cleared
+  onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;

-  onNext: (Element) => {},      // Called when moving to next step on any step
-  onPrevious: (Element) => {},  // Called when moving to next step on any step
+  // By overriding the default onNextClick and onPrevClick, you control the flow of the driver
+  // Visit for more details: https://driverjs.com/docs/configuration
+  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;

+  // New options added
+  overlayColor?: string;
+  stageRadius?: number;
+  popoverOffset?: number;
+  disableButtons?: ["next", "prev", "close"];
+  showProgress?: boolean;
+  progressText?: string;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
}
```

--------------------------------

### Navigation Methods

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Methods for navigating through the tour steps, including moving to the next, previous, or a specific step.

```APIDOC
## Navigation Methods

### Description
Methods for navigating through the tour steps, including moving to the next, previous, or a specific step.

### Method
`moveNext()`, `movePrevious()`, `moveTo(stepIndex)`

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
driverObj.moveNext(); // Move to the next step
driverObj.movePrevious(); // Move to the previous step
driverObj.moveTo(4); // Move to the step 4
```

### Response
#### Success Response
These methods do not return a value.

#### Response Example
None
```

--------------------------------

### Show Tour Progress

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/tour-progress.mdx

Enable tour progress display by setting `showProgress` to true. This option is false by default. You can also configure which buttons to show.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  showButtons: ['next', 'previous'],
  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(16)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
  ]
});

driverObj.drive();
```

--------------------------------

### Modify Popover DOM with onPopoverRender Hook

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/styling-popover.mdx

Use the `onPopoverRender` hook to access and modify the popover's DOM elements. This example adds a custom button to the popover footer that navigates to the first step of the tour.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  // Get full control over the popover rendering.
  // Here we are adding a custom button that takes
  // the user to the first step.
  onPopoverRender: (popover, { config, state }) => {
    const firstButton = document.createElement("button");
    firstButton.innerText = "Go to First";
    popover.footerButtons.appendChild(firstButton);

    firstButton.addEventListener("click", () => {
      driverObj.drive(0);
    });
  },
  steps: [
    // ..
  ]
});

driverObj.drive();

```

--------------------------------

### Prevent Tour Exit with allowClose: false

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/prevent-destroy.mdx

Use the `allowClose: false` option when initializing Driver.js to prevent users from closing the tour before completion. This ensures they go through all the steps.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  allowClose: false,
  steps: [
    { 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' }},
    { 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' }},
    { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
  ],
});

driverObj.drive();
```

--------------------------------

### Driver.js 1.x Step and Popover Definition Changes

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

Understand the modifications in defining steps and popovers for Driver.js 1.x, including optional fields and new positioning/callback options.

```diff
const stepDefinition = {
  popover: {
-   closeBtnText: 'Close', // Removed, close button is an icon
-   element: '.some-element', // Required
+   closeBtnText: 'Close', // Removed, close button is an icon
+   element: '.some-element', // Required
+   popoverClass: string;
-   className: 'popover-class',
-   showButtons: false,
+   showButtons: ["next", "previous", "close"]; // Array of buttons to show
-   title: '';  // Required
+   title: '';  // Optional
-   description: ''; // Required
+   description: ''; // Optional

-   // position can be left, left-center, left-bottom, top,
-   // top-center, top-right, right, right-center, right-bottom,
-   // bottom, bottom-center, bottom-right, mid-center
-   position: 'left',
+   // Now you need to specify the side and align separately
+   side?: "top" | "right" | "bottom" | "left";
+   align?: "start" | "center" | "end";

+   // New options
+   showProgress?: boolean;
+   progressText?: string;
+   onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+   onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
+   onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
+   onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
  }

+ // New hook to control the flow of the driver
+ onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
};
```

--------------------------------

### Manage Driver.js Configuration and State

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/api.mdx

Methods for retrieving and updating the driver instance's configuration and steps. You can also access the current state of the tour.

```javascript
// Look at the configuration section for configuration options
// https://driverjs.com/docs/configuration#driver-configuration
driverObj.getConfig();
driverObj.setConfig({ /* ... */ });

driverObj.setSteps([ /* ... */ ]); // Set the steps

// Look at the state section of configuration for format of the state
// https://driverjs.com/docs/configuration#state
driverObj.getState();
```

--------------------------------

### Show All Buttons in Popover

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/buttons.mdx

Use the `showButtons` option to display 'next', 'previous', and 'close' buttons. This is the default configuration.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showButtons: [
    'next',
    'previous',
    'close'
  ],
  steps: [
    {
      element: '#first-element',
      popover: {
        title: 'Popover Title',
        description: 'Popover Description'
      }
    },
    {
      element: '#second-element',
      popover: {
        title: 'Popover Title',
        description: 'Popover Description'
      }
    }
  ]
});

driverObj.drive();
```

--------------------------------

### New Options for Navigation and State

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

New methods are available for controlling navigation and accessing driver state, including `moveTo`, `getActiveStep`, `getPreviousStep`, `isLastStep`, `isFirstStep`, `getState`, `getConfig`, `setConfig`, and `refresh`.

```javascript
// New options added
driverObj.moveTo(stepIndex)
driverObj.getActiveStep(); // returns the configured step definition
driverObj.getPreviousStep(); // returns the previous step definition
driverObj.isLastStep();
driverObj.isFirstStep();
driverObj.getState();
driverObj.getConfig();
driverObj.setConfig(config);
driverObj.refresh();
```

--------------------------------

### Highlight a Step

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/migrating-from-0x.mdx

The `driverObj.highlight()` method now only accepts a `stepDefinition` object, removing the option to pass a string step number.

```javascript
driverObj.highlight(stepDefinition)
```

--------------------------------

### Popover Configuration Options

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/configuration.mdx

Defines the structure for popover configuration, including options for title, description, side, alignment, buttons, text, progress, custom classes, and render/click callbacks.

```typescript
type Popover = {
  // Title and descriptions shown in the popover.
  // You can use HTML in these. Also, you can
  // omit one of these to show only the other.
  title?: string;
  description?: string;

  // Which side of the target element the popover is
  // placed on. Auto-flips to the opposite side when it
  // doesn't fit the viewport. (default: "bottom")
  side?: "top" | "right" | "bottom" | "left";
  // How the popover is aligned along that side. "start"
  // lines its leading edge up with the element, "center"
  // centers it, and "end" lines up the trailing edges.
  // (default: "start")
  align?: "start" | "center" | "end";

  // Array of buttons to show in the popover.
  // When highlighting a single element, there
  // are no buttons by default. When showing
  // a tour, the default buttons are "next",
  // "previous" and "close".
  showButtons?: ("next" | "previous" | "close")[];
  // An array of buttons to disable. This is
  // useful when you want to show some of the
  // buttons, but disable some of them.
  disableButtons?: ("next" | "previous" | "close")[];

  // Text to show in the buttons. `doneBtnText`
  // is used on the last step of a tour.
  nextBtnText?: string;
  prevBtnText?: string;
  doneBtnText?: string;

  // Whether to show the progress text in popover.
  showProgress?: boolean;
  // Template for the progress text. You can use
  // the following placeholders in the template:
  //   - {{current}}: The current step number
  //   - {{total}}: Total number of steps
  // Defaults to following if `showProgress` is true:
  //   - "{{current}} of {{total}}"
  progressText?: string;

  // Custom class to add to the popover element.
  // This can be used to style the popover.
  popoverClass?: string;

  // Hook to run after the popover is rendered.
  // You can modify the popover element here.
  // Parameter is an object with references to
  // the popover DOM elements such as buttons
  // title, descriptions, body, etc.
  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State; driver: Driver }) => void;

  // Callbacks for button clicks. You can use
  // these to add custom behavior to the buttons.
  // Each callback receives the following parameters:
  //   - element: The current DOM element of the step
  //   - step: The step object configured for the step
  //   - options.config: The current configuration options
  //   - options.state: The current state of the driver
  //   - options.driver: Current driver object
  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State; driver: Driver }) => void;
  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State; driver: Driver }) => void;
  onCloseClick?: (
    element?: Element,
    step: DriveStep,
    options: { config: Config; state: State; driver: Driver }
  ) => void;
  // Runs instead of `onNextClick` when the done button
  // (the next button on the last step) is clicked.
  onDoneClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State; driver: Driver }) => void;
};

```

--------------------------------

### Handle Button Clicks in Driver.js

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/buttons.mdx

Implement custom functionality when tour navigation buttons are clicked using callbacks like onNextClick, onPrevClick, onCloseClick, and onDoneClick. Remember to manually control tour progression or destruction when using these callbacks.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  onNextClick:() => {
    console.log('Next Button Clicked');
    // Implement your own functionality here
    driverObj.moveNext();
  },
  onPrevClick:() => {
    console.log('Previous Button Clicked');
    // Implement your own functionality here
    driverObj.movePrevious();
  },
  onCloseClick:() => {
    console.log('Close Button Clicked');
    // Implement your own functionality here
    driverObj.destroy();
  },
  onDoneClick:() => {
    console.log('Done Button Clicked');
    // Runs on the last step instead of onNextClick
    driverObj.destroy();
  },
  steps: [
    // ...
  ]
});

driverObj.drive();
```

--------------------------------

### Overlay Styling Class

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/theming.mdx

Style the overlay (lightbox) displayed over the page using the `.driver-overlay` class.

```css
.driver-overlay {}
```

--------------------------------

### Set Overlay Color to Red

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/styling-overlay.mdx

Demonstrates how to set the overlay color to red using the `overlayColor` option. Any valid RGB color can be passed.

```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  overlayColor: 'red'
});

driverObj.highlight({
  popover: {
    title: 'Pass any RGB Color',
    description: 'Here we have set the overlay color to be red. You can pass any RGB color to overlayColor option.'
  }
});
```

--------------------------------

### Set Overlay Color to Blue

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/styling-overlay.mdx

Shows how to set the overlay color to blue with a specified opacity. This allows for custom theming of the overlay.

```javascript
config: {
  overlayColor: 'blue',
  overlayOpacity: 0.3
},
highlight: {
  popover: {
    title: 'Pass any RGB Color',
    description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
  }
}
```

--------------------------------

### Highlight Element with Popover

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/simple-highlight.mdx

Use this to highlight a specific element and display a popover with a title and description. Ensure the element selector is valid.

```javascript
const driverObj = driver({
  popoverClass: "driverjs-theme",
  stagePadding: 4,
});

driverObj.highlight({
  element: "#highlight-me",
  popover: {
    side: "bottom",
    title: "This is a title",
    description: "This is a description",
  }
})
```

--------------------------------

### Include Driver.js via CDN

Source: https://github.com/nilbuild/driver.js/blob/master/docs/src/content/guides/installation.mdx

Include Driver.js and its CSS using script and link tags in your HTML file for direct browser usage.

```html
<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css"/>
```