Change style of the close button

index.html

@@ -335,6 +335,23 @@ npm install driver.js</pre
     <script type="module">
       import { driver } from "./src/driver.ts";
 
+      const driverObj = driver({
+        animate: false,
+      });
+
+      driverObj.highlight({
+        element: "h1",
+        popover: {
+          title: "A popover",
+          side: 'bottom',
+          description: "Working on the close functionality right now. Turning it into a small cross button on top right corner.",
+          showButtons: ["close", "next", "previous"],
+          onCloseClick: () => {
+            driverObj.destroy();
+          }
+        }
+      });
+
       const basicTourSteps = [
         {
           element: ".page-header",
@@ -596,7 +613,6 @@ npm install driver.js</pre
         const driverObj = driver({
           prevBtnText: "<——",
           nextBtnText: "——>",
-          closeBtnText: "X",
         });
 
         driverObj.highlight({
@@ -605,7 +621,6 @@ npm install driver.js</pre
             side: "left",
             title: "Button from Config",
             showButtons: ["close", "next", "previous"],
-            closeBtnText: "xx",
             nextBtnText: "==>",
             prevBtnText: "<==",
             description: "These buttons are configured using driver config.",

src/config.ts

@@ -22,7 +22,6 @@ export type Config = {
   // Button texts
   nextBtnText?: string;
   prevBtnText?: string;
-  closeBtnText?: string;
   doneBtnText?: string;
 
   // Called after the popover is rendered

src/popover.ts

@@ -22,7 +22,6 @@ export type Popover = {
 
   // Button texts
   doneBtnText?: string;
-  closeBtnText?: string;
   nextBtnText?: string;
   prevBtnText?: string;
 
@@ -72,15 +71,12 @@ export function renderPopover(element: Element, step: DriveStep) {
     showButtons,
     disableButtons,
 
-    // doneBtnText = 'Done',
-    closeBtnText = getConfig("closeBtnText") || "Close",
     nextBtnText = getConfig("nextBtnText") || "Next →",
     prevBtnText = getConfig("prevBtnText") || "← Previous",
   } = step.popover || {};
 
   popover.nextButton.innerHTML = nextBtnText;
   popover.previousButton.innerHTML = prevBtnText;
-  popover.closeButton.innerHTML = closeBtnText;
 
   if (title) {
     popover.title.innerText = title;
@@ -98,12 +94,11 @@ export function renderPopover(element: Element, step: DriveStep) {
 
   const showButtonsConfig: AllowedButtons[] = showButtons || getConfig("showButtons")!;
 
-  if (showButtonsConfig?.length! > 0) {
+  popover.closeButton.style.display = showButtonsConfig.includes("close") ? 'block' : 'none';
+  if (showButtonsConfig?.includes("next") || showButtonsConfig?.includes("previous")) {
     popover.footer.style.display = "flex";
-
     popover.nextButton.style.display = showButtonsConfig.includes("next") ? 'block' : 'none';
     popover.previousButton.style.display = showButtonsConfig.includes("previous") ? 'block' : 'none';
-    popover.closeButton.style.display = showButtonsConfig.includes("close") ? 'block' : 'none';
   } else {
     popover.footer.style.display = "none";
   }
@@ -576,7 +571,7 @@ function createPopover(): PopoverDOM {
 
   const closeButton = document.createElement("button");
   closeButton.classList.add("driver-popover-close-btn");
-  closeButton.innerText = "Close";
+  closeButton.innerHTML = "×";
 
   const footerButtons = document.createElement("span");
   footerButtons.classList.add("driver-popover-navigation-btns");
@@ -591,10 +586,9 @@ function createPopover(): PopoverDOM {
 
   footerButtons.appendChild(previousButton);
   footerButtons.appendChild(nextButton);
-
-  footer.appendChild(closeButton);
   footer.appendChild(footerButtons);
 
+  wrapper.appendChild(closeButton);
   wrapper.appendChild(arrow);
   wrapper.appendChild(title);
   wrapper.appendChild(description);

src/style.css

@@ -49,6 +49,10 @@
   background-color: #fff;
 }
 
+.driver-popover * {
+  font-family: "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif;
+}
+
 .driver-popover-title {
   font: 19px / normal sans-serif;
   font-weight: 700;
@@ -59,6 +63,27 @@
   margin: 0;
 }
 
+.driver-popover-close-btn {
+  all: unset;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 32px;
+  height: 28px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  color: #d2d2d2;
+  z-index: 1;
+  text-align: center;
+  transition: color;
+  transition-duration: 200ms;
+}
+
+.driver-popover-close-btn:hover {
+  color: #2d2d2d;
+}
+
 .driver-popover-title[style*="block"] + .driver-popover-description {
   margin-top: 5px;
 }