Styling of the popup buttons

index.html

@@ -256,8 +256,8 @@ npm install driver.js</pre
         driver({ animate: true }).highlight({
           element: "h2",
           popover: {
-            title: "driver.js",
-            description: "A lightweight, no-dependency JavaScript engine to drive user's focus across the page",
+            title: "MIT License",
+            description: "A lightweight, no-dependency JavaScript engine to drive user's focus.",
           },
         });
       });
@@ -267,7 +267,8 @@ npm install driver.js</pre
           element: "#large-paragraph-text",
           popover: {
             title: "driver.js",
-            description: "Highlight anything, anywhere on the page",
+            description:
+              "Highlight anything, anywhere on the page. Yes, literally anything including SVG portions, scrollable items etc.",
             align: "end",
             side: "top",
           },

src/highlight.ts

@@ -99,7 +99,7 @@ function transferHighlight(from: Element, to: Element, toStep: DriveStep) {
     const isHalfwayThrough = timeRemaining <= duration / 2;
 
     if (toStep.popover && isHalfwayThrough && !isPopoverRendered && hasDelayedPopover) {
-      renderPopover(to);
+      renderPopover(to, toStep);
       isPopoverRendered = true;
     }
 
@@ -119,7 +119,7 @@ function transferHighlight(from: Element, to: Element, toStep: DriveStep) {
 
   bringInView(to);
   if (!hasDelayedPopover && toStep.popover) {
-    renderPopover(to);
+    renderPopover(to, toStep);
   }
 
   from.classList.remove("driver-active-element");

src/popover.ts

@@ -1,6 +1,7 @@
 import { bringInView } from "./utils";
 import { getConfig } from "./config";
 import { getState, setState } from "./state";
+import { DriveStep } from "./driver";
 
 export type Side = "top" | "right" | "bottom" | "left" | "over";
 export type Alignment = "start" | "center" | "end";
@@ -33,13 +34,29 @@ export function hidePopover() {
   popover.wrapper.style.display = "none";
 }
 
-export function renderPopover(element: Element) {
+export function renderPopover(element: Element, step: DriveStep) {
   let popover = getState("popover");
   if (!popover) {
     popover = createPopover();
     document.body.appendChild(popover.wrapper);
   }
 
+  const { title, description } = step.popover || {};
+
+  if (title) {
+    popover.title.innerText = title;
+    popover.title.style.display = "block";
+  } else {
+    popover.title.style.display = "none";
+  }
+
+  if (description) {
+    popover.description.innerHTML = description;
+    popover.description.style.display = "block";
+  } else {
+    popover.description.style.display = "none";
+  }
+
   // Reset the popover position
   const popoverWrapper = popover.wrapper;
   popoverWrapper.style.display = "block";
@@ -183,8 +200,8 @@ export function repositionPopover(element: Element) {
   // @TODO These values will come from the config
   // Configure the popover positioning
   const requiredAlignment: Alignment = "start";
-  const requiredSide: Side = element.id === "driver-dummy-element" ? "over" : "left" as Side;
-  const popoverPadding = getConfig('stagePadding') || 0;
+  const requiredSide: Side = element.id === "driver-dummy-element" ? "over" : ("left" as Side);
+  const popoverPadding = getConfig("stagePadding") || 0;
 
   const popoverDimensions = getPopoverDimensions()!;
   const popoverArrowDimensions = popover.arrow.getBoundingClientRect();
@@ -423,10 +440,12 @@ function createPopover(): PopoverDOM {
 
   const title = document.createElement("div");
   title.classList.add("driver-popover-title");
+  title.style.display = "none";
   title.innerText = "Popover Title";
 
   const description = document.createElement("div");
   description.classList.add("driver-popover-description");
+  description.style.display = "none";
   description.innerText = "Popover description is here";
 
   const footer = document.createElement("div");

src/style.css

@@ -33,8 +33,11 @@
 
 /* Popover styles */
 .driver-popover {
+  all: unset;
+  box-sizing: border-box;
   color: #2d2d2d;
   margin: 0;
+  padding: 15px;
   border-radius: 5px;
   min-width: 250px;
   max-width: 300px;
@@ -46,6 +49,54 @@
   background-color: #fff;
 }
 
+.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;
+}
+
+.driver-popover-description {
+  margin-bottom: 0;
+  font: 14px / normal sans-serif;
+  line-height: 1.5;
+  color: #2d2d2d;
+  font-weight: 400;
+  zoom: 1;
+}
+
+.driver-popover-footer {
+  margin-top: 15px;
+  text-align: right;
+  zoom: 1;
+  display: flex;
+  justify-content: space-between;
+}
+
+.driver-popover-footer button {
+  all: unset;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 5px 10px;
+  text-decoration: none;
+  text-shadow: 1px 1px 0 #fff;
+  color: #2d2d2d;
+  font: 12px / normal sans-serif;
+  cursor: pointer;
+  outline: 0;
+  zoom: 1;
+  line-height: 1.3;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.driver-popover-footer-btns button + button {
+  margin-left: 5px;
+}
+
 .driver-popover-arrow {
   content: "";
   position: absolute;