feat(showArrow): show/hide arrow from tooltip

Author: Alexandre-io

README.md

@@ -290,6 +290,7 @@ introductionjs().onafterchange(function(targetElement) {
  - `showSkipButton`: Show skip button or not, `true` or `false` 
  - `showBullets`: Show introduction bullets or not, `true` or `false`
  - `showProgress`: Show introduction progress or not, `true` or `false`
+ - `showArrow`: Show arrow to dialog or not, `true` or `false`
  - `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false`
  - `overlayOpacity`: Adjust the overlay opacity, `Number`
  - `disableInteraction`: Disable an interaction inside element or not, `true` or `false`

src/introduction.js

@@ -60,6 +60,8 @@
       showBullets: true,
       /* Show tour progress? */
       showProgress: false,
+      /* Show arrow to dialog */
+      showArrow: false,
       /* Scroll to highlighted element? */
       scrollToElement: true,
       /* Set the overlay opacity */
@@ -509,7 +511,9 @@
     var tooltipLayerStyleLeft = 0;
     switch (currentTooltipPosition) {
       case 'top':
-        arrowLayer.className = 'introjs-arrow bottom';
+        if (this._options.showArrow) {
+          arrowLayer.className = 'introjs-arrow bottom';
+        }
 
         tooltipLayerStyleLeft = 15;
         _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
@@ -520,10 +524,12 @@
         if (targetOffset.top + tooltipOffset.height > windowSize.height) {
           // In this case, right would have fallen below the bottom of the screen.
           // Modify so that the bottom of the tooltip connects with the target
-          arrowLayer.className = "introjs-arrow left-bottom";
+          if (this._options.showArrow) {
+            arrowLayer.className = "introjs-arrow left-bottom";
+          }
           tooltipLayer.style.top = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px";
         }
-        else {
+        else if (this._options.showArrow) {
           arrowLayer.className = 'introjs-arrow left';
         }
         break;
@@ -536,10 +542,13 @@
           // In this case, left would have fallen below the bottom of the screen.
           // Modify so that the bottom of the tooltip connects with the target
           tooltipLayer.style.top = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px";
-          arrowLayer.className = 'introjs-arrow right-bottom';
+          if (this._options.showArrow) {
+            arrowLayer.className = 'introjs-arrow right-bottom';
+          }
         }
-        else {
+        else if (this._options.showArrow) {
           arrowLayer.className = 'introjs-arrow right';
+
         }
         tooltipLayer.style.right = (targetOffset.width + 20) + 'px';
 
@@ -560,15 +569,19 @@
 
         break;
       case 'bottom-right-aligned':
-        arrowLayer.className = 'introjs-arrow top-right';
+        if (this._options.showArrow) {
+          arrowLayer.className = 'introjs-arrow top-right';
+        }
 
         var tooltipLayerStyleRight = 0;
         _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer);
         tooltipLayer.style.top = (targetOffset.height + 20) + 'px';
         break;
 
       case 'bottom-middle-aligned':
-        arrowLayer.className = 'introjs-arrow top-middle';
+        if (this._options.showArrow) {
+          arrowLayer.className = 'introjs-arrow top-middle';
+        }
 
         var tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
         if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) {
@@ -578,7 +591,9 @@
         tooltipLayer.style.top = (targetOffset.height + 20) + 'px';
         break;
       default:
-        arrowLayer.className = 'introjs-arrow top';
+        if (this._options.showArrow) {
+          arrowLayer.className = 'introjs-arrow top';
+        }
 
         _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
         tooltipLayer.style.top = (targetOffset.height + 20) + 'px';