fix(tooltip): fix placement issues

Closes #115
angular-ui · Feb 14, 2013 · a2bbf4d · facultymatt · Mar 17, 2013 · a2bbf4d
1 parent ff5d119
commit a2bbf4d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/popover/popover.js b/src/popover/popover.js
@@ -12,7 +12,7 @@ angular.module( 'ui.bootstrap.popover', [] )
     templateUrl: 'template/popover/popover.html'
   };
 })
-.directive( 'popover', [ '$compile', '$timeout', '$parse', function ( $compile, $timeout, $parse ) {
+.directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', function ( $compile, $timeout, $parse, $window ) {
 
   var template = 
     '<popover-popup '+
@@ -52,15 +52,15 @@ angular.module( 'ui.bootstrap.popover', [] )
 
       // Calculate the current position and size of the directive element.
       function getPosition() {
+        var boundingClientRect = element[0].getBoundingClientRect();
         return {
           width: element.prop( 'offsetWidth' ),
           height: element.prop( 'offsetHeight' ),
-          top: element.prop( 'offsetTop' ),
-          left: element.prop( 'offsetLeft' )
+          top: boundingClientRect.top + $window.pageYOffset,
+          left: boundingClientRect.left + $window.pageXOffset
         };
       }
-
-      // Show the popover popup element.
+
       function show() {
         var position,
             ttWidth,

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -12,7 +12,7 @@ angular.module( 'ui.bootstrap.tooltip', [] )
     templateUrl: 'template/tooltip/tooltip-popup.html'
   };
 })
-.directive( 'tooltip', [ '$compile', '$timeout', '$parse', function ( $compile, $timeout, $parse ) {
+.directive( 'tooltip', [ '$compile', '$timeout', '$parse', '$window', function ( $compile, $timeout, $parse, $window) {
 
   var template = 
     '<tooltip-popup '+
@@ -47,11 +47,12 @@ angular.module( 'ui.bootstrap.tooltip', [] )
 
       // Calculate the current position and size of the directive element.
       function getPosition() {
+        var boundingClientRect = element[0].getBoundingClientRect();
         return {
           width: element.prop( 'offsetWidth' ),
           height: element.prop( 'offsetHeight' ),
-          top: element.prop( 'offsetTop' ),
-          left: element.prop( 'offsetLeft' )
+          top: boundingClientRect.top + $window.pageYOffset,
+          left: boundingClientRect.left + $window.pageXOffset
         };
       }
 
@@ -82,7 +83,7 @@ angular.module( 'ui.bootstrap.tooltip', [] )
 
         // Get the position of the directive element.
         position = getPosition();
-        
+
         // Get the height and width of the tooltip so we can center it.
         ttWidth = tooltip.prop( 'offsetWidth' );
         ttHeight = tooltip.prop( 'offsetHeight' );