driver.jsCustom Buttons
Use this when Next, Previous and Done aren’t enough: a way to skip the tour from any step, a restart at the end, or button text in the user’s language.
Skip and Restart
onPopoverRender gets the popover’s DOM before it shows, so you can add your own buttons. The driver-popover-footer-btn class gives them the default button look.
const driverObj = driver({
showButtons: ["next", "previous"],
steps: [
// ...
],
onPopoverRender: (popover, { driver }) => {
const button = document.createElement("button");
button.className = "driver-popover-footer-btn";
if (driver.isLastStep()) {
button.innerText = "Restart";
button.addEventListener("click", () => driver.drive(0));
} else {
button.innerText = "Skip tour";
button.addEventListener("click", () => driver.destroy());
}
popover.footerButtons.prepend(button);
},
});
driverObj.drive();The parts of the popover you can reach are listed in Theming.
Rename and Translate
The built-in buttons take their text from options, and HTML is allowed. Pick the strings for the user’s language. Switch the language below and run the tour.
const labels = {
en: {
next: "Next",
prev: "Back",
done: "Done",
of: "of",
close: "Close tour",
},
de: {
next: "Weiter",
prev: "Zurück",
done: "Fertig",
of: "von",
close: "Tour schließen",
},
};
const lang = navigator.language.slice(0, 2);
const t = labels[lang] ?? labels.en;
const driverObj = driver({
showProgress: true,
nextBtnText: `${t.next} →`,
prevBtnText: `← ${t.prev}`,
doneBtnText: t.done,
progressText: `{{current}} ${t.of} {{total}}`,
closeBtnLabel: t.close,
steps: [
// ...
],
});Set them on a step’s popover to change one step only, like “Let’s go” on the first.
Uses: onPopoverRender, button text, progressText, API