diff --git a/index.html b/index.html
index 75f6948..be7ed59 100644
--- a/index.html
+++ b/index.html
@@ -146,7 +146,7 @@
-
+
given below are the examples of simple `highlight`
@@ -155,9 +155,10 @@
+
-
+
You can Attach events to buttons.
@@ -373,6 +374,27 @@ npm install driver.js {
+ const driverObj = driver({
+ prevBtnText: "<——",
+ nextBtnText: "——>",
+ closeBtnText: "X",
+ });
+
+ driverObj.highlight({
+ element: "#button-texts",
+ popover: {
+ side: "left",
+ title: "Button from Config",
+ showButtons: ["close", "next", "previous"],
+ closeBtnText: "xx",
+ nextBtnText: "==>",
+ prevBtnText: "<==",
+ description: "These buttons are configured using driver config.",
+ },
+ });
+ });
+
document.getElementById("is-active-btn").addEventListener("click", () => {
alert(driver().isActive());
});
@@ -514,7 +536,7 @@ npm install driver.js {
const hooksEl = document.getElementById("hooks-list");
- hooksEl.innerHTML = '';
+ hooksEl.innerHTML = "";
const driverObj = driver({
animate: true,
diff --git a/src/config.ts b/src/config.ts
index 7e87e51..c3f0bc0 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -12,6 +12,11 @@ export type Config = {
popoverOffset?: number;
showButtons?: AllowedButtons[];
+ // Button texts
+ nextBtnText?: string;
+ prevBtnText?: string;
+ closeBtnText?: string;
+
// State based callbacks, called upon state changes
onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
onHighlighted?: (element: Element | undefined, step: DriveStep) => void;
diff --git a/src/popover.ts b/src/popover.ts
index 6924002..4fe51dc 100644
--- a/src/popover.ts
+++ b/src/popover.ts
@@ -54,9 +54,9 @@ export function renderPopover(element: Element, step: DriveStep) {
description,
showButtons: popoverShowButtons = undefined,
// doneBtnText = 'Done',
- closeBtnText = "Close",
- nextBtnText = "Next →",
- prevBtnText = "← Previous",
+ closeBtnText = getConfig("closeBtnText") || "Close",
+ nextBtnText = getConfig("nextBtnText") || "Next →",
+ prevBtnText = getConfig("prevBtnText") || "← Previous",
} = step.popover || {};
popover.nextButton.innerHTML = nextBtnText;
@@ -77,21 +77,22 @@ export function renderPopover(element: Element, step: DriveStep) {
popover.description.style.display = "none";
}
- const showButtonsConfig: AllowedButtons[] = popoverShowButtons !== undefined ? popoverShowButtons : getConfig("showButtons")!;
+ const showButtonsConfig: AllowedButtons[] =
+ popoverShowButtons !== undefined ? popoverShowButtons : getConfig("showButtons")!;
console.log(popoverShowButtons);
if (showButtonsConfig?.length! > 0) {
popover.footer.style.display = "flex";
- if (!showButtonsConfig.includes('next')) {
+ if (!showButtonsConfig.includes("next")) {
popover.nextButton.style.display = "none";
}
- if (!showButtonsConfig.includes('previous')) {
+ if (!showButtonsConfig.includes("previous")) {
popover.previousButton.style.display = "none";
}
- if (!showButtonsConfig.includes('close')) {
+ if (!showButtonsConfig.includes("close")) {
popover.closeButton.style.display = "none";
}
} else {