Driver.js

https://driverjs.com/docs/
Admin
Driver.js is a lightweight JavaScript library for creating product tours, highlights, and contextual...
Tokens:32,486
Snippets:281
Trust Score:8.1
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Product Tour with driver.js

Source: https://driverjs.com/docs/examples

Import the driver and CSS, create a driver instance with steps, and call drive() to start the tour. The example shows a tour with three steps targeting elements by CSS selector and includes a progress indicator.

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

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: "#search",
      popover: { title: "Search", description: "Find anything in seconds." },
    },
    {
      element: "#notifications",
      popover: { title: "Stay updated", description: "All your alerts live here." },
    },
    {
      element: "#profile",
      popover: { title: "Your account", description: "Manage settings and billing." },
    },
  ],
});

driverObj.drive();
```

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

### Basic Tour Example with driver()

Source: https://driverjs.com/docs/basic-usage

Creates a multi-step tour with progress indicator. Requires importing the driver function and its CSS. The steps array defines elements and popover content. Call drive() to start the tour.

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

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

### Basic Animated Tour with driver.js

Source: https://driverjs.com/docs/animated-tour

Creates a driver instance with `showProgress: true` and a series of steps targeting elements on the page. The tour is started by calling `driverObj.drive()`. This example shows the basic setup for an animated 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();
```

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

### driverObj.drive()

Source: https://driverjs.com/docs/api

Starts the tour using the steps given in the configuration. Optionally starts at a specific step index.

```APIDOC
## driverObj.drive()

### Description
Starts the tour using the steps given in the configuration. Optionally starts at a specific step index.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
- **startIndex** (number) - Optional - The step index to start the tour from. Defaults to 0.

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

### Response
No return value.
```

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

### productHints.getHints()

Source: https://driverjs.com/docs/api

Gets the configured hints.

```APIDOC
## productHints.getHints()

### Description
Gets the configured hints.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
productHints.getHints();
```

### Response
Returns the configured hints array.
```

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

### Create a Static Tour with animate: false

Source: https://driverjs.com/docs/static-tour

Creates a static tour by setting the `animate` option to `false`, which disables animations between steps and simply shows the popover. The example also disables the progress bar and specifies the navigation buttons to show. Call `driverObj.drive()` to start the tour.

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

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

### Hints with driver.js

Source: https://driverjs.com/docs/examples

Import the hints module and CSS, create a hints instance with a list of hints, and call show() to display them. This example shows two hints targeting different elements.

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

const productHints = hints({
  hints: [
    {
      element: "#export-btn",
      popover: { title: "New: Export", description: "Download reports as CSV or PDF." },
    },
    {
      element: "#filters",
      popover: { title: "Filters", description: "Narrow results by date or owner." },
    },
  ],
});

productHints.show();
```

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

### Install driver.js with npm, pnpm, or yarn

Source: https://driverjs.com/docs/installation

Install the driver.js package using npm, pnpm, or yarn. Choose the command that matches your package manager.

```bash
# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js
```

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

### driverObj.getNextStep()

Source: https://driverjs.com/docs/api

Gets the next step configuration.

```APIDOC
## driverObj.getNextStep()

### Description
Gets the next step configuration.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the next step configuration.
```

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

### Configure beacon placement with offsets

Source: https://driverjs.com/docs/hints

Configure beacon placement using `side`, `align`, and pixel offsets. The example places the beacon at the top-right corner and nudges it 12px left and 8px down.

```javascript
const hint = {
  element: "#dashboard",
  beacon: { side: "top", align: "end", offsetX: -12, offsetY: 8 },
};
```

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

### driverObj.getPreviousStep()

Source: https://driverjs.com/docs/api

Gets the previous step configuration.

```APIDOC
## driverObj.getPreviousStep()

### Description
Gets the previous step configuration.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the previous step configuration.
```

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

### driverObj.getConfig()

Source: https://driverjs.com/docs/api

Gets the current configuration options.

```APIDOC
## driverObj.getConfig()

### Description
Gets the current configuration options.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the current configuration object.
```

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

### Launch a tour from a hint with onButtonClick

Source: https://driverjs.com/docs/hints

Hints and tours coexist without wiring: while a tour runs, beacons hide and any open hint closes; when the tour ends, beacons return. This pattern uses onButtonClick to close the hint and start the tour.

```javascript
const tour = driver({ steps: [...] });

const productHints = hints({
  hints: [
    {
      element: "#whats-new",
      id: "whats-new",
      popover: {
        title: "New dashboard",
        description: "Want a quick walkthrough?",
        buttonText: "Take the tour",
        onButtonClick: (element, hint, { hints: instance }) => {
          instance.close();
          tour.drive();
        },
      },
    },
  ],
});
```

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

### driverObj.getActiveStep()

Source: https://driverjs.com/docs/api

Gets the active step configuration.

```APIDOC
## driverObj.getActiveStep()

### Description
Gets the active step configuration.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the active step configuration.
```

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

### Single Highlight with driver.js

Source: https://driverjs.com/docs/examples

Create a driver instance and call highlight() to spotlight a single element with a popover. This example highlights a new feature with a title and description.

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

const driverObj = driver();

driverObj.highlight({
  element: "#new-feature",
  popover: {
    title: "New: Dark Mode 🌙",
    description: "Toggle the theme right from the toolbar.",
  },
});
```

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

### productHints.getActive()

Source: https://driverjs.com/docs/api

Gets the hint whose popover is open, if any.

```APIDOC
## productHints.getActive()

### Description
Gets the hint whose popover is open, if any.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
productHints.getActive();
```

### Response
Returns the active hint object, or null if none.
```

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

### Changes in configuration

Source: https://driverjs.com/docs/migrating-from-0x

Configuration options have been renamed, removed, or added. For example, 'opacity' is now 'overlayOpacity', 'className' is 'popoverClass', and new options like 'overlayColor' and 'showProgress' are introduced.

```javascript
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) {}, // Called when element has been deselected
+  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;
}
```

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

### Resume tour from saved step on page load

Source: https://driverjs.com/docs/multi-page-tour

On each page load or router mount, reads the saved step index from localStorage and starts a fresh tour from that index using drive(). The tour resumes exactly where it left off.

```javascript
const savedStep = localStorage.getItem(TOUR_KEY);
if (savedStep !== null) {
  createTour().drive(Number(savedStep));
}
```

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

### productHints.show()

Source: https://driverjs.com/docs/api

Mounts the beacons. Calling it again picks up hints whose elements have appeared since.

```APIDOC
## productHints.show()

### Description
Mounts the beacons. Calling it again picks up hints whose elements have appeared since.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
productHints.show();
```

### Response
No return value.
```

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

### hints()

Source: https://driverjs.com/docs/hints

Creates a hints instance with the given configuration. The configuration includes an array of hints, default beacon settings, popover text and styling, overlay options, and lifecycle callbacks.

```APIDOC
## hints()

### Description
Creates a hints instance that manages a set of non-intrusive beacons and popovers on the page. The configuration object allows customization of beacon appearance, popover text, overlay behavior, and event hooks.

### Method
hints()

### Parameters
#### Configuration Object
- **hints** (Array) - Required - Array of hint objects, each documented below.
- **beacon** (Object) - Optional - Defaults applied to every hint's beacon; a hint's own values win. Properties: `side` (string, default "top"), `align` (string, default "end"), `offsetX` (number, default 0), `offsetY` (number, default 0), `animate` (boolean, default true), `className` (string, default "").
- **buttonText** (string) - Optional - Text of the dismiss button. Defaults to "Got it".
- **popoverClass** (string) - Optional - Class for the hint popovers, same meaning as in tours.
- **popoverOffset** (number) - Optional - Offset for the hint popovers, same meaning as in tours.
- **overlay** (boolean) - Optional - Dim the page while a hint is open. Off by default.
- **overlayColor** (string) - Optional - Color of the overlay. Defaults to "#000".
- **overlayOpacity** (number) - Optional - Opacity of the overlay. Defaults to 0.7.
- **onOpen** (function) - Optional - Called when a hint popover is opened. Signature: `(element, hint, { config, hints }) => {}`.
- **onDismiss** (function) - Optional - Called when a hint is dismissed. Signature: `(element, hint, { config, hints }) => {}`.
- **onButtonClick** (function) - Optional - Runs instead of dismissing when the button is clicked. Signature: `(element, hint, { config, hints }) => {}`. Call `hints.dismiss(hint.id)` to also remove the hint.

### Request Example
```javascript
const productHints = hints({
  overlay: true,
  overlayColor: "#000",
  overlayOpacity: 0.5,
  hints: [...],
});
```

### Response
#### Success Response
Returns a hints instance with methods for controlling the hints.

#### Response Example
```javascript
const productHints = hints({ ... });
```
```

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

### driverObj.getState()

Source: https://driverjs.com/docs/api

Gets the current state of the tour.

```APIDOC
## driverObj.getState()

### Description
Gets the current state of the tour.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the current state object.
```

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

### driver.js hints() instance methods

Source: https://driverjs.com/docs/api

Import the hints factory and its CSS, then create an instance with hints(). The instance exposes methods to manage hint beacons and popovers: show(), hide(), open(), close(), dismiss(), restore(), restoreAll(), setHints(), getHints(), getActive(), isVisible(), and refresh(). Hints are addressed by their id or by index when no id is set. Each hints() call is independent and does not affect other instances or a running tour.

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

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

// -----------------------------------------------------
// productHints is an object with the following methods
// -----------------------------------------------------

// Mount the beacons. Calling it again picks up hints
// whose elements have appeared since.
productHints.show();
// Remove the beacons and listeners; show() brings them back
productHints.hide();

// Hints are addressed by their `id`, or by their
// index in the array when no id is set.
productHints.open("export"); // Open a hint's popover
productHints.close(); // Close the open popover, keeping its beacon
productHints.dismiss("export"); // Remove the hint's beacon and fire onDismiss
productHints.restore("export"); // Bring a dismissed hint back
productHints.restoreAll(); // Bring every dismissed hint back

productHints.setHints([
  /* ... */
]); // Replace the hints; resets dismissals
productHints.getHints(); // The configured hints
productHints.getActive(); // The hint whose popover is open, if any

productHints.isVisible(); // Whether the beacons are currently shown

// Reposition the beacons, the open popover and the
// overlay after layout changes
productHints.refresh();
```

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

### driver.js driver() instance methods

Source: https://driverjs.com/docs/api

Import the driver factory and its CSS, then create an instance with driver(). The instance exposes methods to control tours and highlights: drive(), moveNext(), movePrevious(), moveTo(), hasNextStep(), hasPreviousStep(), isFirstStep(), isLastStep(), getActiveIndex(), getActiveStep(), getPreviousStep(), getNextStep(), getActiveElement(), getPreviousElement(), isActive(), refresh(), getConfig(), setConfig(), setSteps(), getState(), highlight(), and destroy(). Each driver() call returns an independent instance; only one can be on screen at a time.

```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({
  /* ... */
});

// --------------------------------------------------
// driverObj is an object with the following methods
// --------------------------------------------------

// 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

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

// Is the tour or highlight currently active
driverObj.isActive();

// Recalculate and redraw the highlight
driverObj.refresh();

// 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();

// Look at the DriveStep section of configuration for format of the step
// https://driverjs.com/docs/configuration/#drive-step-configuration
driverObj.highlight({
  /* ... */
}); // Highlight an element

driverObj.destroy(); // Destroy the tour
```

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

### driverObj.getPreviousElement()

Source: https://driverjs.com/docs/api

Gets the previous HTML element.

```APIDOC
## driverObj.getPreviousElement()

### Description
Gets the previous HTML element.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the previous HTML element.
```

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

### driverObj.getActiveElement()

Source: https://driverjs.com/docs/api

Gets the active HTML element.

```APIDOC
## driverObj.getActiveElement()

### Description
Gets the active HTML element.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the active HTML element.
```

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

### Show Hints with hints() from driver.js/hints

Source: https://driverjs.com/docs/basic-usage

Creates and shows hints using the separate hints entry point. Requires importing from 'driver.js/hints' and its CSS. Hints are pulsing beacons that open a popover on click without blocking the page.

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

const productHints = hints({
  hints: [
    { element: '#export-btn', popover: { title: 'Export your data', description: 'Download this report as CSV or PDF.' } },
    { element: '#summary', popover: { title: 'Auto-generated summary', description: 'Written for you from the numbers.' } },
  ],
});

productHints.show();
```

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

### Import hints from driver.js/hints

Source: https://driverjs.com/docs/installation

Import the hints entry point and its self-contained stylesheet. Only import when you use hints.

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

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

### Import and highlight an element with driver.js

Source: https://driverjs.com/docs/installation

Import driver.js and its CSS, then create a driver instance and highlight an element with a popover.

```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",
  },
});
```

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

### hints instance methods

Source: https://driverjs.com/docs/hints

Methods available on the object returned by `hints()`. These methods allow programmatic control over the beacons and popovers, such as showing, hiding, opening, dismissing, and restoring hints.

```APIDOC
## hints instance methods

### Description
The object returned by `hints()` provides methods to control the lifecycle and state of the hints. These methods allow you to show or hide all beacons, open or close popovers, dismiss and restore individual hints, and query the current state.

### Methods
- **show()** - Mount the beacons.
- **hide()** - Remove beacons and listeners; show() brings them back.
- **open(id)** - Open a hint's popover programmatically. Parameter: `id` (string) - The hint's id.
- **close()** - Close the open popover, keeping its beacon.
- **dismiss(id)** - Dismiss a hint, firing onDismiss. Parameter: `id` (string) - The hint's id.
- **restore(id)** - Bring a dismissed hint back. Parameter: `id` (string) - The hint's id.
- **restoreAll()** - Bring every dismissed hint back.
- **setHints(hints)** - Replace the hints; resets dismissals. Parameter: `hints` (Array) - New array of hint objects.
- **getHints()** - Returns the configured hints.
- **getActive()** - Returns the hint whose popover is open, if any.
- **isVisible()** - Returns whether the beacons are currently shown.
- **refresh()** - Reposition after layout changes.

### Request Example
```javascript
const productHints = hints({ ... });

productHints.show();          // mount the beacons
productHints.hide();          // remove beacons and listeners; show() brings them back
productHints.open("export");  // open a hint's popover programmatically
productHints.close();         // close the open popover, keeping its beacon
productHints.dismiss("export");  // dismiss a hint, firing onDismiss
productHints.restore("export");  // bring a dismissed hint back
productHints.restoreAll();       // bring every dismissed hint back
productHints.setHints([...]); // replace the hints; resets dismissals
productHints.getHints();      // the configured hints
productHints.getActive();     // the hint whose popover is open, if any
productHints.isVisible();     // whether the beacons are currently shown
productHints.refresh();       // reposition after layout changes
```

### Response
#### Success Response
Each method returns the appropriate value: `getHints()` returns the array of hints, `getActive()` returns the active hint object or null, `isVisible()` returns a boolean, and the other methods return undefined.
```

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

### driverObj.getActiveIndex()

Source: https://driverjs.com/docs/api

Gets the active step index.

```APIDOC
## driverObj.getActiveIndex()

### Description
Gets the active step index.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

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

### Response
Returns the index of the active step.
```

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

### Highlight with popover side and align options

Source: https://driverjs.com/docs/popover-position

Use the `side` and `align` options to control the popover position. The `side` option can be `top`, `right`, `bottom`, or `left` (default `bottom`). The `align` option can be `start`, `center`, or `end` (default `start`). The popover automatically adjusts to fit in the viewport.

```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",
  },
});
```

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

### Use hints instance methods

Source: https://driverjs.com/docs/hints

Methods on the returned hints instance. show mounts beacons, hide removes them, open/close manage popovers, dismiss/restore manage hint state, and setHints replaces hints and resets dismissals.

```javascript
const productHints = hints({ ... });

productHints.show();          // mount the beacons
productHints.hide();          // remove beacons and listeners; show() brings them back
productHints.open("export");  // open a hint's popover programmatically
productHints.close();         // close the open popover, keeping its beacon
productHints.dismiss("export");  // dismiss a hint, firing onDismiss
productHints.restore("export");  // bring a dismissed hint back
productHints.restoreAll();       // bring every dismissed hint back
productHints.setHints([...]); // replace the hints; resets dismissals
productHints.getHints();      // the configured hints
productHints.getActive();     // the hint whose popover is open, if any
productHints.isVisible();     // whether the beacons are currently shown
productHints.refresh();       // reposition after layout changes
```

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

### productHints.restoreAll()

Source: https://driverjs.com/docs/api

Brings every dismissed hint back.

```APIDOC
## productHints.restoreAll()

### Description
Brings every dismissed hint back.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
productHints.restoreAll();
```

### Response
No return value.
```

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

### Disable beacon animation

Source: https://driverjs.com/docs/styling-hints

Disable the beacon pulse animation for a static dot. Set `animate: false` on a hint or on the instance-level `beacon` defaults; users preferring reduced motion get the still dot automatically.

```javascript
const productHints = hints({
  // Applies to every hint; a hint's own beacon config wins.
  beacon: { animate: false },
  hints: [...],
});
```

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

### Access hints global from CDN

Source: https://driverjs.com/docs/installation

The hints build exposes its own global, window.driverHints.hints, for use with the CDN.

```javascript
const hints = window.driverHints.hints;
```

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

### Configure hints() options

Source: https://driverjs.com/docs/hints

Configuration options for hints(). Includes defaults for beacon, buttonText, popoverClass, popoverOffset, overlay, and hooks. onButtonClick runs instead of dismissing; call hints.dismiss(hint.id) to also remove the hint.

```javascript
const productHints = hints({
  // Array of hints, documented below.
  hints: [],

  // Defaults applied to every hint's beacon; a hint's own values win.
  beacon: { side: "top", align: "end", offsetX: 0, offsetY: 0, animate: true, className: "" },

  // Text of the dismiss button. Defaults to "Got it".
  buttonText: "Got it",

  // Class and offset for the hint popovers, same meaning as in tours.
  popoverClass: "my-theme",
  popoverOffset: 10,

  // Dim the page while a hint is open. Off by default.
  overlay: false,
  overlayColor: "#000",
  overlayOpacity: 0.7,

  // Called when a hint popover is opened / a hint is dismissed.
  onOpen: (element, hint, { config, hints }) => {},
  onDismiss: (element, hint, { config, hints }) => {},

  // Runs instead of dismissing when the button is clicked, like a
  // tour's onNextClick takes over the default advance. Call
  // hints.dismiss(hint.id) yourself to also remove the hint.
  onButtonClick: (element, hint, { config, hints }) => {},
});
```

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

### Modify Popover DOM with onPopoverRender

Source: https://driverjs.com/docs/styling-popover

Use the onPopoverRender callback to modify the popover DOM before it is rendered. This example adds a custom button to the popover footer that navigates to the first step when clicked. The callback receives the popover element and an object with config and state.

```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.className = "driver-popover-footer-btn";
    firstButton.innerText = "Go to First";
    popover.footerButtons.appendChild(firstButton);

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

driverObj.drive();
```

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

### productHints.setHints(hints)

Source: https://driverjs.com/docs/api

Replaces the hints; resets dismissals.

```APIDOC
## productHints.setHints(hints)

### Description
Replaces the hints; resets dismissals.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
- **hints** (array) - Required - The new hints array.

### Request Example
```javascript
productHints.setHints([
  /* ... */
]);
```

### Response
No return value.
```

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

### Change in how you initialize the library

Source: https://driverjs.com/docs/migrating-from-0x

Initialization changed from creating a new Driver instance and calling setSteps to passing steps directly in the driver() constructor.

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

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

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

### Change Button Text with nextBtnText, prevBtnText, doneBtnText

Source: https://driverjs.com/docs/buttons

Change the text of the next, previous, and done buttons using `nextBtnText`, `prevBtnText`, and `doneBtnText`. Use `closeBtnLabel` to set the screen reader label for the close button. The example also enables `showProgress`.

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

const driverObj = driver({
  nextBtnText: '—›',
  prevBtnText: '‹—',
  doneBtnText: '✕',
  closeBtnLabel: 'Close tour',
  showProgress: true,
  steps: [
    // ...
  ]
});

driverObj.drive();
```

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

### Create and show hints with overlay

Source: https://driverjs.com/docs/hints

Create hints with the optional overlay enabled (overlayOpacity 0.5) and two hint definitions. Each hint targets an element and uses the same popover as tours; call show() to display them.

```javascript
const productHints = hints({
  overlay: true,
  overlayOpacity: 0.5,
  hints: [
    {
      element: "#export-btn",
      id: "export",
      popover: {
        title: "Export your data",
        description: "Download this report as CSV or PDF.",
      },
    },
    {
      element: "#summary",
      id: "summary",
      beacon: { side: "left", align: "center" },
      popover: {
        title: "Auto-generated summary",
        description: "This paragraph is written for you from the quarter's numbers.",
        side: "bottom",
      },
    },
  ],
});

productHints.show();
```

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

### Add Custom Buttons with onPopoverRender

Source: https://driverjs.com/docs/buttons

Add custom buttons to the popover footer using the `onPopoverRender` callback, which runs before the popover is rendered. The example creates a button that navigates to the first step via `driverObj.drive(0)`. Adding the class `driver-popover-footer-btn` gives default styling; omit it for custom styles.

```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.className = "driver-popover-footer-btn";
    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();
```

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

### API method changes in Driver.js 1.x

Source: https://driverjs.com/docs/migrating-from-0x

Lists the API method renames and additions in Driver.js 1.x. Removed methods include preventMove and the activeElement helpers; start becomes drive, reset becomes destroy, and property isActivated becomes method isActive(). New methods include moveTo, getActiveStep, getPreviousStep, isLastStep, isFirstStep, getState, getConfig, setConfig, and refresh.

```javascript
- driverObj.preventMove();  // async support is built-in, no longer need to call this
- activeElement.getCalculatedPosition();
- activeElement.hidePopover();
- activeElement.showPopover();
- activeElement.getNode();

- const isActivated = driverObj.isActivated;
+ const isActivated = driverObj.isActive();

- driverObj.start(stepNumber = 0);
+ driverObj.drive(stepNumber = 0);

- driverObj.highlight(string|stepDefinition);
+ driverObj.highlight(stepDefinition)

- driverObj.reset();
+ driverObj.destroy();

- driverObj.hasHighlightedElement();
+ typeof driverObj.getActiveElement() !== 'undefined';

- driverObj.getHighlightedElement();
+ driverObj.getActiveElement();

- driverObj.getLastHighlightedElement();
+ driverObj.getPreviousElement();

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

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

### productHints.open(id)

Source: https://driverjs.com/docs/api

Opens a hint's popover. Hints are addressed by their `id`, or by their index in the array when no id is set.

```APIDOC
## productHints.open(id)

### Description
Opens a hint's popover. Hints are addressed by their `id`, or by their index in the array when no id is set.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
- **id** (string|number) - Required - The hint's id or index.

### Request Example
```javascript
productHints.open("export");
```

### Response
No return value.
```

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

### Advance on Click with driver.js

Source: https://driverjs.com/docs/interactive-tour

Creates a driver.js tour with advanceOnClick enabled so clicking the highlighted element advances the tour as if the next button was pressed, while the element's own click behavior still runs. Also sets showProgress to display progress. Use this when you want the product itself to drive the tour without custom hooks.

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

const driverObj = driver({
  advanceOnClick: true,
  showProgress: true,
  steps: [
    { element: '#pick-plan', popover: { title: 'Pick a Plan', description: 'Click the highlighted card to continue.' } },
    { element: '#billing-toggle', popover: { title: 'Billing', description: 'Clicking advances the tour; the toggle still flips.' } },
    { element: '#checkout-btn', popover: { title: 'Checkout', description: 'Clicking the last element ends the tour.' } },
  ],
});

driverObj.drive();
```

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

### Highlighting a Simple Element with driverObj.highlight()

Source: https://driverjs.com/docs/basic-usage

Highlights a single element using the highlight method. Pass a single step configuration with element and popover details. Requires the same imports as the basic tour.

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

const driverObj = driver();
driverObj.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  },
});
```

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

### Enable Tour Progress with showProgress

Source: https://driverjs.com/docs/tour-progress

Use the `showProgress` option to display tour progress in the bottom left corner. `showProgress` is `false` by default; the default `progressText` is `{{current}} of {{total}}`, and you can use `{{current}}` and `{{total}}` in your template.

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

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

### Create resumable tour with advanceOnClick and progress saving

Source: https://driverjs.com/docs/multi-page-tour

Defines a createTour function that builds a driver instance with steps. The settings step uses advanceOnClick with an onNextClick override to save the resume index to localStorage and destroy the tour before navigation. Includes steps for the settings page and an onDestroyed handler that clears saved progress unless navigating.

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

const TOUR_KEY = "app-tour-step";

export function createTour() {
  let isNavigating = false;

  const driverObj = driver({
    steps: [
      {
        element: "#reports-nav",
        popover: { title: "Reports", description: "Your reports live here." },
      },
      {
        element: "#settings-link",
        // Clicking the highlighted link continues the tour and navigates.
        advanceOnClick: true,
        popover: {
          title: "Open Settings",
          description: "Click this link to continue on the settings page.",
          showButtons: ["close"],
          onNextClick: () => {
            // The next step lives on another page: save where to resume
            // and let the click's navigation happen naturally.
            isNavigating = true;
            localStorage.setItem(TOUR_KEY, "2");
            driverObj.destroy();
          },
        },
      },
      // These steps target elements on the settings page. waitForElement
      // absorbs the rendering delay after a client-side route change.
      {
        element: "#profile-form",
        waitForElement: 5000,
        popover: { title: "Your Profile", description: "Update your details here." },
      },
      {
        element: "#save-settings",
        popover: { title: "Save", description: "Don't forget to save your changes." },
      },
    ],
    onDestroyed: () => {
      // Finished or exited: clear the saved progress so the tour does not
      // come back on the next visit. Skipped for the hand-off destroy above.
      if (!isNavigating) {
        localStorage.removeItem(TOUR_KEY);
      }
    },
  });

  return driverObj;
}
```
Tokens:
Raw