Dynamic title and descriptions

assets/scripts/src/popover.js

@@ -1,5 +1,12 @@
 import Element from './element';
-import { CLASS_POPOVER_TIP, ID_POPOVER, OVERLAY_PADDING, POPOVER_HTML } from './constants';
+import {
+  CLASS_POPOVER_DESCRIPTION,
+  CLASS_POPOVER_TIP,
+  CLASS_POPOVER_TITLE,
+  ID_POPOVER,
+  OVERLAY_PADDING,
+  POPOVER_HTML,
+} from './constants';
 
 /**
  * Popover that is displayed on top of the highlighted element
@@ -14,11 +21,11 @@ export default class Popover extends Element {
     this.window = window;
     this.document = document;
 
-    this.node = this.preparePopover();
+    this.node = this.makeNode();
     this.hide();
   }
 
-  preparePopover() {
+  makeNode() {
     let popover = this.document.getElementById(ID_POPOVER);
     if (popover) {
       return popover;
@@ -67,9 +74,14 @@ export default class Popover extends Element {
   show(position) {
     this.reset();
 
-    const pageHeight = this.getFullPageSize().height;
-
     const popoverTip = this.node.querySelector(`.${CLASS_POPOVER_TIP}`);
+    const popoverTitle = this.node.querySelector(`.${CLASS_POPOVER_TITLE}`);
+    const popoverDescription = this.node.querySelector(`.${CLASS_POPOVER_DESCRIPTION}`);
+
+    popoverTitle.innerText = this.options.title;
+    popoverDescription.innerText = this.options.description;
+
+    const pageHeight = this.getFullPageSize().height;
     const popoverMargin = this.options.padding + 10;
     const popoverHeight = this.getHeight();
 

assets/scripts/src/sholo.js

@@ -176,15 +176,18 @@ export default class Sholo {
       }
 
       const elementOptions = Object.assign({}, this.options, step);
-      const popoverOptions = Object.assign({}, this.options, elementOptions.popover || {});
-
       const domElement = this.document.querySelector(step.element);
       if (!domElement) {
         console.warn(`Element to highlight ${step.element} not found`);
         return;
       }
 
-      const popover = elementOptions.popover ? new Popover(popoverOptions, this.window, this.document) : null;
+      let popover = null;
+      const popoverOptions = Object.assign({}, this.options, elementOptions.popover || {});
+      if (elementOptions.popover && elementOptions.popover.description) {
+        popover = new Popover(popoverOptions, this.window, this.document);
+      }
+
       const element = new Element(domElement, elementOptions, popover, this.overlay, this.window, this.document);
 
       this.steps.push(element);

index.html

@@ -65,11 +65,18 @@
 
   sholo.defineSteps([
     {
-      element: '.section__header'
+      element: '.section__header',
+      popover: {
+        title: 'Adding Introductions',
+        description: 'You can use it to add popovers on top of the website'
+      },
     },
     {
       element: '.section__how',
-      popover: {}
+      popover: {
+        title: 'Just Specify the Item',
+        description: 'All you have to do is provide the query selector of element to highlight'
+      },
     },
     {
       element: '.section__purpose',