API Reference

Here is the list of methods provided by driver when you initialize it.

Note: We have omitted the configuration options for brevity. Please look at the configuration section for the options. Links are provided in the description below.

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

Each driver() call returns its own independent instance. You can create as many as you need on the same page, and their configuration, steps, and state never overlap.

Hints

Hints ship as their own entry and factory. See the Hints guide for an introduction, and the Hints Configuration section for the options.

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

Like driver(), each hints() call is independent: its hints, dismissals, and overlay never affect another instance or a running tour.