Confirm Before Closing

Use this when leaving halfway would lose something, like a setup the user has to finish. Ask before the tour closes early, or take the way out away entirely.

Confirm on Exit

onDestroyStarted runs when the tour is about to end. Once you set it, the tour only ends when you call destroy(). The example only asks when the user leaves early.

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

const driverObj = driver({
  steps: [
    { element: "#search", popover: { title: "Search" } },
    { element: "#export", popover: { title: "Export" } },
  ],
  onDestroyStarted: (element, step, { reason }) => {
    if (reason === "done" || confirm("Are you sure?")) {
      driverObj.destroy();
    }
  },
});

driverObj.drive();

reason tells a finished tour ("done") apart from one the user is leaving. Use your own modal instead of confirm() the same way: call destroy() when the user agrees.

Prevent Exit

allowClose: false removes the close button and turns off Escape and overlay clicks, so the only way out is to finish the tour.

const driverObj = driver({
  allowClose: false,
  showProgress: true,
  steps: [
    { element: "#search", popover: { title: "Search" } },
    { element: "#export", popover: { title: "Export" } },
  ],
});

driverObj.drive();

To keep the close button and only ignore clicks on the overlay, use overlayClickBehavior: "none" instead.

Uses: onDestroyStarted, reason, allowClose, overlayClickBehavior