add option for custom highlightClass

Author: connyay

README.md

@@ -330,6 +330,7 @@ introJs().onafterchange(function(targetElement) {
  - `data-intro`: The tooltip text of step
  - `data-step`: Optionally define the number (priority) of step
  - `data-tooltipClass`: Optionally define a CSS class for tooltip
+ - `data-highlightClass`: Optionally append a CSS class to the helperLayer
  - `data-position`: Optionally define the position of tooltip, `top`, `left`, `right`, `bottom`, `bottom-left-aligned` (same as 'bottom'), 'bottom-middle-aligned' and 'bottom-right-aligned'. Default is `bottom`
 
 ###Options:
@@ -341,6 +342,7 @@ introJs().onafterchange(function(targetElement) {
  - `doneLabel`: Done button label
  - `tooltipPosition`: Default tooltip position
  - `tooltipClass`: Adding CSS class to all tooltips
+ - `highlightClass`: Additional CSS class for the helperLayer
  - `exitOnEsc`: Exit introduction when pressing Escape button, `true` or `false`
  - `exitOnOverlayClick`: Exit introduction when clicking on overlay layer, `true` or `false`
  - `showStepNumbers`: Show steps number in the red circle or not, `true` or `false`

intro.js

@@ -42,6 +42,8 @@
       tooltipPosition: 'bottom',
       /* Next CSS class for tooltip boxes */
       tooltipClass: '',
+      /* CSS class that is added to the helperLayer */
+      highlightClass: '',
       /* Close introduction when pressing Escape button? */
       exitOnEsc: true,
       /* Close introduction when clicking on overlay layer? */
@@ -130,6 +132,7 @@
             intro: currentElement.getAttribute('data-intro'),
             step: parseInt(currentElement.getAttribute('data-step'), 10),
             tooltipClass: currentElement.getAttribute('data-tooltipClass'),
+            highlightClass: currentElement.getAttribute('data-highlightClass') || this._options.highlightClass,
             position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
           };
         }
@@ -156,6 +159,7 @@
             intro: currentElement.getAttribute('data-intro'),
             step: nextStep + 1,
             tooltipClass: currentElement.getAttribute('data-tooltipClass'),
+            highlightClass: currentElement.getAttribute('data-highlightClass') || this._options.highlightClass,
             position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
           };
         }
@@ -515,7 +519,7 @@
         break;
     }
   }
-  
+
   /**
    * Determines the position of the tooltip based on the position precedence and availability
    * of screen space.
@@ -655,8 +659,13 @@
     var self = this,
         oldHelperLayer = document.querySelector('.introjs-helperLayer'),
         oldReferenceLayer = document.querySelector('.introjs-tooltipReferenceLayer'),
+        highlightClass = 'introjs-helperLayer',
         elementPosition = _getOffset(targetElement.element);
 
+    if (targetElement.highlightClass) {
+      highlightClass += (' ' + targetElement.highlightClass);
+    }
+
     if (oldHelperLayer != null) {
       var oldHelperNumberLayer = oldReferenceLayer.querySelector('.introjs-helperNumberLayer'),
           oldtooltipLayer      = oldReferenceLayer.querySelector('.introjs-tooltiptext'),
@@ -666,6 +675,8 @@
           prevTooltipButton    = oldReferenceLayer.querySelector('.introjs-prevbutton'),
           nextTooltipButton    = oldReferenceLayer.querySelector('.introjs-nextbutton');
 
+      //update or reset the helper highlight class
+      oldHelperLayer.className = highlightClass;
       //hide the tooltip
       oldtooltipContainer.style.opacity = 0;
       oldtooltipContainer.style.display = "none";
@@ -727,7 +738,7 @@
           bulletsLayer      = document.createElement('div'),
           buttonsLayer      = document.createElement('div');
 
-      helperLayer.className = 'introjs-helperLayer';
+      helperLayer.className = highlightClass;
       referenceLayer.className = 'introjs-tooltipReferenceLayer';
 
       //set new position to helper layer