arrow

Author: Yaron Nachshon

intro.js

@@ -71,7 +71,7 @@
           return offset;
         }
 
-        function fitOffsetToScreen(offset, width, height){
+        function fitOffsetToScreen(offset, width){
           var bodyBoundingClientRect = $('body').get(0).getBoundingClientRect();
           var delta;
           if((offset.left + width) > bodyBoundingClientRect.right){
@@ -86,11 +86,13 @@
 
         function outerPositionElement(element, target, position){
           var offset = convertOuterPositionToOffset(element, target, position);
-          offset = fitOffsetToScreen(offset, element.outerWidth(), element.outerHeight());
+          offset = fitOffsetToScreen(offset, element.outerWidth());
           return element.offset(offset);
         }
 
 
+
+
         function Hint(){
           var tooltip;
           var that = this;
@@ -99,9 +101,39 @@
           var hintPosition;
           var wasRendered = false;
 
+          function getTooltipArrowElement(){
+            return tooltip.find('.intro-tooltip-arrow');
+          }
 
+          function difference(a, b) {
+             return Math.abs(a - b);
+           }
 
+          function createTooltip(){
+            var tooltip = $('<div><div class="intro-tooltip-content"></div><div class="intro-tooltip-arrow"></div></div>')
+                          .addClass('intro-tooltip');
+            tooltip.hide();
+            $('body').append(tooltip);
+            return tooltip;
+          }
+
+          function repositionTooltipArrow(){
+              var tooltipArrowElement = getTooltipArrowElement();
+              tooltipArrowElement.css({'left': 0});
+              var elementBoundingClientRect =  that.element.get(0).getBoundingClientRect();
+              var tooltipBoundingClientRect =  tooltip.get(0).getBoundingClientRect();
+              var delta = difference(elementBoundingClientRect.left, tooltipBoundingClientRect.left);
+
+              tooltipArrowElement.css({left: delta});
+
+          }
 
+          function createHint(){
+            var hint = $('<div class="intro-hint"><div class="intro-circle"></div></div>');
+            hint.hide();
+            $('body').append(hint);
+            return hint;
+          }
 
           this.element =  null;
 
@@ -135,29 +167,17 @@
 
             that.element.show();
             innerPositionElement(that.element, targetElement, hintPosition, duration).then(function(){
+              getTooltipArrowElement().attr('position', tooltipPosition);
               tooltip.css('opacity', 0).show();
               outerPositionElement(tooltip, that.element, tooltipPosition);
+              repositionTooltipArrow();
               tooltip.animate({'opacity':  1});
               defer.resolve();
             });
             wasRendered = true;
             return defer.promise();
           };
 
-          function createTooltip(){
-            var tooltip = $('<div><div class="intro-tooltip-content"></div><div class="intro-tooltip-arrow"></div></div>')
-                          .addClass('intro-tooltip');
-            tooltip.hide();
-            $('body').append(tooltip);
-            return tooltip;
-          }
-
-          function createHint(){
-            var hint = $('<div class="intro-hint"><div class="intro-circle"></div></div>');
-            hint.hide();
-            $('body').append(hint);
-            return hint;
-          }
 
           function init(){
             that.element = createHint();
@@ -225,7 +245,7 @@
 
         function showStep(step){
           var _showStep = function(){
-            hint =  hint ||  new Hint();
+            hint =  hint || new Hint();
             backdrop =  backdrop || createBackdrop();
 
             hint.setTarget(step.element || $('body'));

introjs.min.css

@@ -9,7 +9,7 @@
 //     @include arrow(top, #000, 50px);
 // }
 
-$arrow-size-border: 5px;
+$arrow-size-border: 10px;
 $arrow-size: $arrow-size-border * 2;
 
 @mixin arrow($direction, $color, $size){
@@ -80,25 +80,35 @@ $arrow-size: $arrow-size-border * 2;
     position: absolute;
   }
 
+  .intro-tooltip-arrow {
+    &[position=right]{
+      @include arrow('left', red, $arrow-size-border);
+    }
+    &[position=left]{
+      @include arrow('right', red, $arrow-size-border);
+    }
+    &[position=bottom]{
+      @include arrow('top', red, $arrow-size-border);
+    }
+    &[position=top]{
+      @include arrow('bottom', red, $arrow-size-border);
+      top: 0;
+    }
+  }
+
   &.right {
     top: 50%;
     transform: translateY(-50%);
     left: calc(100% + 12px);
-    .intro-tooltip-arrow {
-      @include arrow('left', red, $arrow-size-border);
-      left: -($arrow-size / 2);
-      top: calc(50% - #{$arrow-size / 2});
-    }
+
   }
 
   &.left {
     top: 50%;
     right: calc(100% + 13px );
     transform: translateY(-50%);
     .intro-tooltip-arrow {
-      @include arrow('right', red, $arrow-size-border);
-      left: 100%;
-      top: calc(50% - #{$arrow-size / 2});
+
     }
   }
 
@@ -107,9 +117,7 @@ $arrow-size: $arrow-size-border * 2;
     left: 50%;
     transform: translateX(-50%);
     .intro-tooltip-arrow {
-      @include arrow('top', red, $arrow-size-border);
-      left: calc(50% - #{$arrow-size / 2});
-      top: -($arrow-size / 2);
+
     }
   }
 
@@ -118,9 +126,7 @@ $arrow-size: $arrow-size-border * 2;
     left: 50%;
     transform: translateX(-50%);
     .intro-tooltip-arrow {
-      @include arrow('bottom', red, $arrow-size-border);
-      left: calc(50% - #{($arrow-size / 2)});
-      top: 100%;
+
     }
   }
 }