Basic Usage

Driver.js does three things: tours, single highlights and hints. Each starts with a few lines.

A Tour

Pass steps to driver() and call drive(). Each step points at an element and describes it in a popover.

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

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: ".page-header",
      popover: {
        title: "Header",
        description: "Search and account live here.",
      },
    },
    {
      element: ".sidebar",
      popover: { title: "Sidebar" },
    },
    { popover: { title: "That's it" } },
  ],
});

driverObj.drive();

More in Tour Basics. To make steps wait for the user, see Interactive Tours and Action-Driven Tours.

A Single Highlight

highlight() takes one step and shows it on its own, without navigation buttons.

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

More in Simple Highlight.

Hints

Hints are pulsing beacons that open a popover when clicked. There is no overlay and the page stays usable. They come from their own entry.

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

More in the Hints guide. For onboarding task lists, see Checklists.

Driver.js needs no wrapper for React, Vue or Next.js. See React and Vue for the setup and cleanup.

Next: every option is in Configuration, every method in the API Reference. For ready-made solutions to common jobs, like first-run onboarding or a tour that resumes, see All Recipes.