fix(tooltip): re-position tooltip after draw

Closes #944
angular-ui · Dec 28, 2013 · a99b360 · a99b360
1 parent 3768433
commit a99b360
Showing 1 changed file with 58 additions and 47 deletions.
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -117,6 +117,55 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           var hasRegisteredTriggers = false;
           var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']);
 
+          var positionTooltip = function (){
+            var position,
+              ttWidth,
+              ttHeight,
+              ttPosition;
+            // Get the position of the directive element.
+            position = appendToBody ? $position.offset( element ) : $position.position( element );
+
+            // Get the height and width of the tooltip so we can center it.
+            ttWidth = tooltip.prop( 'offsetWidth' );
+            ttHeight = tooltip.prop( 'offsetHeight' );
+
+            // Calculate the tooltip's top and left coordinates to center it with
+            // this directive.
+            switch ( scope.tt_placement ) {
+              case 'right':
+                ttPosition = {
+                  top: position.top + position.height / 2 - ttHeight / 2,
+                  left: position.left + position.width
+                };
+                break;
+              case 'bottom':
+                ttPosition = {
+                  top: position.top + position.height,
+                  left: position.left + position.width / 2 - ttWidth / 2
+                };
+                break;
+              case 'left':
+                ttPosition = {
+                  top: position.top + position.height / 2 - ttHeight / 2,
+                  left: position.left - ttWidth
+                };
+                break;
+              default:
+                ttPosition = {
+                  top: position.top - ttHeight,
+                  left: position.left + position.width / 2 - ttWidth / 2
+                };
+                break;
+            }
+
+            ttPosition.top += 'px';
+            ttPosition.left += 'px';
+
+            // Now set the calculated positioning.
+            tooltip.css( ttPosition );
+
+          };
+
           // By default, the tooltip is not open.
           // TODO add ability to start tooltip opened
           scope.tt_isOpen = false;
@@ -136,8 +185,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             }
             if ( scope.tt_popupDelay ) {
               popupTimeout = $timeout( show, scope.tt_popupDelay );
+              popupTimeout.then(function(reposition){reposition();});
             } else {
-              scope.$apply( show );
+              scope.$apply( show )();
             }
           }
 
@@ -149,14 +199,11 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
 
           // Show the tooltip popup element.
           function show() {
-            var position,
-                ttWidth,
-                ttHeight,
-                ttPosition;
+
 
             // Don't show empty tooltips.
             if ( ! scope.tt_content ) {
-              return;
+              return angular.noop;
             }
 
             // If there is a pending remove transition, we must cancel it, lest the
@@ -176,50 +223,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               element.after( tooltip );
             }
 
-            // Get the position of the directive element.
-            position = appendToBody ? $position.offset( element ) : $position.position( element );
-
-            // Get the height and width of the tooltip so we can center it.
-            ttWidth = tooltip.prop( 'offsetWidth' );
-            ttHeight = tooltip.prop( 'offsetHeight' );
-
-            // Calculate the tooltip's top and left coordinates to center it with
-            // this directive.
-            switch ( scope.tt_placement ) {
-              case 'right':
-                ttPosition = {
-                  top: position.top + position.height / 2 - ttHeight / 2,
-                  left: position.left + position.width
-                };
-                break;
-              case 'bottom':
-                ttPosition = {
-                  top: position.top + position.height,
-                  left: position.left + position.width / 2 - ttWidth / 2
-                };
-                break;
-              case 'left':
-                ttPosition = {
-                  top: position.top + position.height / 2 - ttHeight / 2,
-                  left: position.left - ttWidth
-                };
-                break;
-              default:
-                ttPosition = {
-                  top: position.top - ttHeight,
-                  left: position.left + position.width / 2 - ttWidth / 2
-                };
-                break;
-            }
-
-            ttPosition.top += 'px';
-            ttPosition.left += 'px';
+            positionTooltip();
 
-            // Now set the calculated positioning.
-            tooltip.css( ttPosition );
-
             // And show the tooltip.
             scope.tt_isOpen = true;
+
+            // Return positioning function as promise callback for correct
+            // positioning after draw.
+            return positionTooltip;
           }
 
           // Hide the tooltip popup element.