Add extra content under description (image, custom html, etc)

index.html

@@ -206,6 +206,9 @@ <h2>Highlight Feature</h2>
         <button id="custom-classes">Custom Classes</button>
         <button id="popover-hook">Popover Hook</button>
         <button id="padding-change">Padding Change</button>
+        <button id="test-content-string">Content (String)</button>
+        <button id="test-content-element">Content (Element)</button>
+        <button id="test-content-interactive">Content (Interactive)</button>
       </div>
 
       <h2>Tour Feature</h2>
@@ -918,7 +921,8 @@ <h2>Usage and Demo</h2>
           element: ".page-header h1 sup",
           popover: {
             title: "Buggy Highlight",
-            description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
+            description:
+              "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
             side: "bottom",
             align: "start",
           },
@@ -930,7 +934,8 @@ <h2>Usage and Demo</h2>
           element: ".container",
           popover: {
             title: "Buggy Highlight",
-            description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
+            description:
+              "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
             side: "bottom",
             align: "start",
           },
@@ -1160,6 +1165,73 @@ <h2>Usage and Demo</h2>
       document.getElementById("destroy-btn").addEventListener("click", () => {
         driver().destroy();
       });
+
+      document.getElementById("test-content-string").addEventListener("click", () => {
+        const driverObj = driver();
+        driverObj.highlight({
+          element: "#test-content-string",
+          popover: {
+            title: "Content with HTML String",
+            description: "This is the regular description.",
+            content:
+              '<div style="padding: 10px; background: #f0f0f0; border-radius: 5px; margin-top: 5px;"><strong>Custom Content</strong><p style="margin: 5px 0 0 0;">This content is inserted via an HTML string.</p></div>',
+          },
+        });
+      });
+
+      document.getElementById("test-content-element").addEventListener("click", () => {
+        const driverObj = driver();
+
+        // Create a custom element
+        const contentDiv = document.createElement("div");
+        contentDiv.style.cssText = "padding: 10px; background: #f0f0f0; border-radius: 5px; margin-top: 5px;";
+
+        const title = document.createElement("strong");
+        title.textContent = "Dynamically Created DOM Element";
+
+        const list = document.createElement("ul");
+        list.style.cssText = "margin: 10px 0 0 0; padding-left: 20px;";
+        ["Item 1", "Item 2", "Item 3"].forEach(text => {
+          const li = document.createElement("li");
+          li.textContent = text;
+          list.appendChild(li);
+        });
+
+        contentDiv.appendChild(title);
+        contentDiv.appendChild(list);
+
+        driverObj.highlight({
+          element: "#test-content-element",
+          popover: {
+            title: "Content with DOM Element",
+            description: "The description is displayed first.",
+            content: contentDiv,
+          },
+        });
+      });
+
+      document.getElementById("test-content-interactive").addEventListener("click", () => {
+        const driverObj = driver();
+
+        const contentDiv = document.createElement("div");
+        contentDiv.style.cssText = " margin-top: 5px; text-align: center;";
+
+        const img = document.createElement("img");
+        img.src = "https://i.imgur.com/EAQhHu5.gif";
+        img.alt = "Demo animation";
+        img.style.cssText = "max-width: 100%; height: auto;";
+
+        contentDiv.appendChild(img);
+
+        driverObj.highlight({
+          element: "#test-content-interactive",
+          popover: {
+            title: "Interactive Content",
+            description: "This popover contains an image!",
+            content: contentDiv,
+          },
+        });
+      });
     </script>
   </body>
 </html>

src/driver.css

@@ -97,6 +97,18 @@
   zoom: 1;
 }
 
+.driver-popover-description[style*="block"] + .driver-popover-content {
+  margin-top: 10px;
+}
+
+.driver-popover-content {
+  margin-bottom: 0;
+  font: 14px / normal sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  zoom: 1;
+}
+
 .driver-popover-footer {
   margin-top: 15px;
   text-align: right;
@@ -141,7 +153,8 @@
   overflow: hidden !important;
 }
 
-.driver-no-interaction, .driver-no-interaction * {
+.driver-no-interaction,
+.driver-no-interaction * {
   pointer-events: none !important;
 }
 

src/popover.ts

@@ -12,6 +12,7 @@ export type AllowedButtons = "next" | "previous" | "close";
 export type Popover = {
   title?: string;
   description?: string;
+  content?: string | HTMLElement | Node;
   side?: Side;
   align?: Alignment;
 
@@ -41,6 +42,7 @@ export type PopoverDOM = {
   arrow: HTMLElement;
   title: HTMLElement;
   description: HTMLElement;
+  content: HTMLElement;
   footer: HTMLElement;
   progress: HTMLElement;
   previousButton: HTMLButtonElement;
@@ -70,6 +72,7 @@ export function renderPopover(element: Element, step: DriveStep) {
   const {
     title,
     description,
+    content,
     showButtons,
     disableButtons,
     showProgress,
@@ -97,6 +100,20 @@ export function renderPopover(element: Element, step: DriveStep) {
     popover.description.style.display = "none";
   }
 
+  if (content) {
+    popover.content.innerHTML = "";
+
+    if (typeof content === "string") {
+      popover.content.innerHTML = content;
+    } else if (content instanceof HTMLElement || content instanceof Node) {
+      popover.content.appendChild(content);
+    }
+
+    popover.content.style.display = "block";
+  } else {
+    popover.content.style.display = "none";
+  }
+
   const showButtonsConfig: AllowedButtons[] = showButtons || getConfig("showButtons")!;
   const showProgressConfig = showProgress || getConfig("showProgress") || false;
   const showFooter =
@@ -642,6 +659,11 @@ function createPopover(): PopoverDOM {
   description.style.display = "none";
   description.innerText = "Popover description is here";
 
+  const content = document.createElement("div");
+  content.id = "driver-popover-content";
+  content.classList.add("driver-popover-content");
+  content.style.display = "none";
+
   const closeButton = document.createElement("button");
   closeButton.type = "button";
   closeButton.classList.add("driver-popover-close-btn");
@@ -677,13 +699,15 @@ function createPopover(): PopoverDOM {
   wrapper.appendChild(arrow);
   wrapper.appendChild(title);
   wrapper.appendChild(description);
+  wrapper.appendChild(content);
   wrapper.appendChild(footer);
 
   return {
     wrapper,
     arrow,
     title,
     description,
+    content,
     footer,
     previousButton,
     nextButton,