Fix scrolling issue

AmrAbdulrahman · Aug 2, 2015 · cb7b190 · cb7b190
1 parent 5821988
commit cb7b190
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/demo.html b/demo.html
@@ -24,9 +24,7 @@
                 <h1>ng-tooltip demo</h1>
             </div>
         </div>
-
-
-
+
         <table class="table table-striped">
             <thead>
                 <tr>
@@ -70,7 +68,6 @@ <h1>ng-tooltip demo</h1>
                     <td></td>
                 </tr>
 
-
                 <!-- Positions -->
                 <tr>
                     <td>
@@ -85,15 +82,6 @@ <h1>ng-tooltip demo</h1>
                             Left
                         </tooltip>
 
-                        <button id="btn-right" class="btn btn-info">Position:Right</button>
-                        <tooltip
-                                handle="btn-right"
-                                on="hover"
-                                position="right">
-                            Right
-                        </tooltip>
-
-
                         <button id="btn-top" class="btn btn-info">Position:Top</button>
                         <tooltip
                                 handle="btn-top"
@@ -110,6 +98,14 @@ <h1>ng-tooltip demo</h1>
                                 position="bottom">
                             Bottom
                         </tooltip>
+
+                        <button id="btn-right" class="btn btn-info">Position:Right</button>
+                        <tooltip
+                            handle="btn-right"
+                            on="hover"
+                            position="right">
+                            Right
+                        </tooltip>
                     </td>
                     <td></td>
                 </tr>

diff --git a/ng-tooltip.js b/ng-tooltip.js
@@ -1,23 +1,22 @@
 'use strict';
 
 angular.module('ng-tooltip', [])
-    .directive('tooltip', function($templateCache, $timeout) {
-        $templateCache.put('ng-tooltip-template.html',
-            [
-                '<div ng-class="{animate: animate, open: visible}" class="smart-tooltip-wrapper"',
-                '   style="top: {{top}}px; left:{{left}}px; -webkit-transition-duration: {{animateTime}}ms; transition-duration: {{animateTime}}ms;">',
-                '   <div class="tooltip-content {{cssClass}}" style="border-color: {{borderColor}}; border-width: {{borderWidth}};">',
-                '       <div ng-transclude></div>',
-                '       <div ng-if="arrow" class="arrow" ng-class="{',
-                '           up: position === \'bottom\',',
-                '           down: position === \'top\',',
-                '           left: position === \'right\',',
-                '           right: position === \'left\'}"',
-                '           style="border-color: {{borderColor}}; border-width: {{borderWidth}}; ',
-                '           top: {{arrowTopOffset}}; left: {{arrowLeftOffset}}; width: {{arrowSize}}px; height: {{arrowSize}}px;',
-                '           top: {{arrowTop}}px;"></div>',
-                '       </div>',
-                '</div>'].join('')
+    .directive('tooltip', function ($templateCache, $timeout, $window) {
+        $templateCache.put('ng-tooltip-template.html', [
+            '<div ng-class="{animate: animate, open: visible}" class="smart-tooltip-wrapper"',
+            '   style="top: {{top}}px; left:{{left}}px; -webkit-transition-duration: {{animateTime}}ms; transition-duration: {{animateTime}}ms;">',
+            '   <div class="tooltip-content {{cssClass}}" style="border-color: {{borderColor}}; border-width: {{borderWidth}};">',
+            '       <div ng-transclude></div>',
+            '       <div ng-if="arrow" class="arrow" ng-class="{',
+            '           up: position === \'bottom\',',
+            '           down: position === \'top\',',
+            '           left: position === \'right\',',
+            '           right: position === \'left\'}"',
+            '           style="border-color: {{borderColor}}; border-width: {{borderWidth}}; ',
+            '           top: {{arrowTopOffset}}; left: {{arrowLeftOffset}}; width: {{arrowSize}}px; height: {{arrowSize}}px;',
+            '           top: {{arrowTop}}px;"></div>',
+            '       </div>',
+            '</div>'].join('')
         );
 
         return {
@@ -114,6 +113,9 @@ angular.module('ng-tooltip', [])
                             scope.left = eLeft - contentWidth - arrowSize;
                         }
 
+                        scope.top -= $(window).scrollTop();
+                        scope.left -= $(window).scrollLeft();
+
                         scope.$apply(function () {
                             scope.visible = true;
                         });
@@ -163,6 +165,13 @@ angular.module('ng-tooltip', [])
                             $timeout(show, 0);
                         }
                     });
+
+                    // watch scroll
+                    angular.element($window).bind('scroll', function() {
+                        if(scope.visible === true) {
+                            $timeout(show, 0);
+                        }
+                    });
                 }
 
                 $timeout(load, 0);