Add button text modification option

src/popover.ts

@@ -11,7 +11,13 @@ export type Popover = {
   description: string;
   side?: Side;
   align?: Alignment;
+
   showButtons?: boolean;
+
+  doneBtnText?: string;
+  closeBtnText?: string;
+  nextBtnText?: string;
+  prevBtnText?: string;
 };
 
 export type PopoverDOM = {
@@ -42,7 +48,19 @@ export function renderPopover(element: Element, step: DriveStep) {
     document.body.appendChild(popover.wrapper);
   }
 
-  const { title, description, showButtons = undefined } = step.popover || {};
+  const {
+    title,
+    description,
+    showButtons = undefined,
+    doneBtnText = 'Done',
+    closeBtnText= 'Close',
+    nextBtnText= 'Next →',
+    prevBtnText = '← Previous',
+  } = step.popover || {};
+
+  popover.nextButton.innerHTML = nextBtnText;
+  popover.previousButton.innerHTML = prevBtnText;
+  popover.closeButton.innerHTML = closeBtnText;
 
   if (title) {
     popover.title.innerText = title;

src/style.css

@@ -51,12 +51,16 @@
 
 .driver-popover-title {
   font: 19px / normal sans-serif;
-  margin: 0 0 5px;
   font-weight: 700;
   display: block;
   position: relative;
   line-height: 1.5;
   zoom: 1;
+  margin: 0;
+}
+
+.driver-popover-title + .driver-popover-description {
+  margin-top: 5px;
 }
 
 .driver-popover-description {
@@ -80,7 +84,7 @@
   all: unset;
   display: inline-block;
   box-sizing: border-box;
-  padding: 5px 10px;
+  padding: 3px 7px;
   text-decoration: none;
   text-shadow: 1px 1px 0 #fff;
   color: #2d2d2d;
@@ -90,11 +94,11 @@
   zoom: 1;
   line-height: 1.3;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 .driver-popover-footer-btns button + button {
-  margin-left: 5px;
+  margin-left: 4px;
 }
 
 .driver-popover-arrow {