Basic Usage

Once installed, you can import and start using the library. There are several different configuration options available to customize the library. You can find more details about the options in the configuration section. Given below are the basic steps to get started.

Here is a simple example of how to create a tour with multiple steps.

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

You can pass a single step configuration to the highlight method to highlight a single element. Given below is a simple example of how to highlight a single element.

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

The same configuration passed to the highlight method can be used to create a tour. Given below is a simple example of how to create a tour with a single step.

Examples above show the basic usage of the library. Find more details about the configuration options in the configuration section and the examples in the examples section.