Interactive Tour

Sometimes the best way forward in a tour is the product itself: click the button you are pointing at, not a “Next” in the popover. Two options make this work without any custom hooks:

• advanceOnClick advances the tour when the highlighted element is clicked, exactly as if the next button was pressed. The element’s own click behavior still runs.
• waitForElement makes a step wait up to the given number of milliseconds for its element to appear, staying on the current step in the meantime.

Both can be set for the whole tour or per step. The tour below has advanceOnClick enabled, so you can click the highlighted lines to walk through it.

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

const driverObj = driver({
  advanceOnClick: true,
  showProgress: true,
  steps: [
    { element: '#pick-plan', popover: { title: 'Pick a Plan', description: 'Click the highlighted card to continue.' } },
    { element: '#billing-toggle', popover: { title: 'Billing', description: 'Clicking advances the tour; the toggle still flips.' } },
    { element: '#checkout-btn', popover: { title: 'Checkout', description: 'Clicking the last element ends the tour.' } },
  ],
});

driverObj.drive();

Tip: For truly click-driven steps, hide the next button with showButtons: ['close'] on the step’s popover so the highlighted element is the only way forward. Note that advanceOnClick has no effect on steps where disableActiveInteraction blocks clicks on the element.

Waiting for On-Demand Elements

Click-driven tours usually lead somewhere new: the click opens a modal or a dropdown whose elements don’t exist yet. Give the next step a waitForElement timeout and the tour waits for the element instead of falling back. In the demo below, pressing next renders the target element about a second later; watch the tour hold the current step, then follow.

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

const driverObj = driver({
  steps: [
    {
      element: '#open-modal-btn',
      advanceOnClick: true,
      popover: {
        title: 'Open the Modal',
        description: 'Clicking this button opens the modal and moves the tour on.',
        showButtons: ['close'],
      },
    },
    {
      // Rendered on demand: the tour waits up to 5 seconds for it,
      // staying on the previous step in the meantime.
      element: '#modal-confirm',
      waitForElement: 5000,
      popover: {
        title: 'Confirm',
        description: 'This step appeared once the modal rendered.',
      },
    },
  ],
});

driverObj.drive();

If the element never appears, the wait times out into the usual missing-element behavior: the centered fallback popover, or a skip when skipMissingElement is set.

For cases where you need full manual control over navigation instead, see the Async Tour example. For tours that continue across page navigations, see Multi-Page Tour.