Start From a Help Menu

Use this for a tour people come back to. “Take the tour” in your help menu starts at the part that explains the screen they’re on, not at step one.

Pick a screen below, then take the tour.

Pick a screen, then take the tour. It starts at that screen's step.

const steps = [
  {
    element: "#tab-inbox",
    data: { screen: "inbox" },
    popover: { title: "Inbox" },
  },
  {
    element: "#tab-reports",
    data: { screen: "reports" },
    popover: { title: "Reports" },
  },
  {
    element: "#tab-settings",
    data: { screen: "settings" },
    popover: { title: "Settings" },
  },
];

const driverObj = driver({
  showProgress: true,
  steps,
  onHighlighted: (element, step) => {
    showScreen(step.data.screen);
  },
});

document
  .querySelector("#help-take-tour")
  .addEventListener("click", () => {
    const index = steps.findIndex(
      step => step.data.screen === currentScreen()
    );
    driverObj.drive(Math.max(index, 0));
  });

A step’s data holds anything you want to keep with it, here the screen it belongs to.
drive(index) starts at that step. Previous still goes back to the earlier ones.
If the tour is already running, driverObj.moveTo(index) jumps to a step without starting over.

Uses: drive(index) and moveTo(), step data, onHighlighted