Add refresh functionality

index.html

@@ -141,6 +141,7 @@
     <button id="without-element-btn">No Element</button>
     <button id="is-active-btn">Is Active?</button>
     <button id="activate-check-btn">Activate and Check</button>
+    <button id="modify-refresh">Modify Active + Refresh</button>
     <button id="destroy-btn">Destroy</button>
   </div>
 
@@ -302,7 +303,6 @@ npm install driver.js</pre
   document.getElementById("highlight-btn").addEventListener("click", () => {
     driver({
       animate: true,
-      showButtons: false,
       popoverOffset: 10,
     }).highlight({
       element: "h2",
@@ -311,6 +311,7 @@ npm install driver.js</pre
         description: "A lightweight, no-dependency JavaScript engine to drive user's focus.",
         side: "bottom",
         align: "start",
+        showButtons: true,
       },
     });
   });

src/driver.ts

@@ -2,7 +2,7 @@ import { destroyPopover, Popover } from "./popover";
 import { destroyStage } from "./stage";
 import { destroyEvents, initEvents } from "./events";
 import { Config, configure, getConfig } from "./config";
-import { destroyHighlight, highlight } from "./highlight";
+import { destroyHighlight, highlight, refreshActiveHighlight } from "./highlight";
 import { destroyEmitter, listen } from "./emitter";
 
 import "./style.css";
@@ -52,10 +52,19 @@ export function driver(options: Config = {}) {
 
   return {
     isActive: () => getState("isInitialized") || false,
+    refresh: () => {
+      refreshActiveHighlight();
+    },
     drive: (steps: DriveStep[]) => console.log(steps),
     highlight: (step: DriveStep) => {
       init();
-      highlight(step);
+      highlight({
+        ...step,
+        popover: step.popover ? {
+          showButtons: false,
+          ...step.popover!,
+        } : undefined,
+      });
     },
     destroy,
   };

src/style.css

@@ -59,7 +59,7 @@
   margin: 0;
 }
 
-.driver-popover-title + .driver-popover-description {
+.driver-popover-title[style*="block"] + .driver-popover-description {
   margin-top: 5px;
 }