feat(tooltip): update position dynamically

Reposition on each digest, this ensures that the tooltip is always positioned correctly no matter how its content changes. Fixes angular-ui#96 Fixes angular-ui#1109 Closes angular-ui#2816 Closes angular-ui#3435
chrisirhc · Mar 27, 2015 · 853fa45 · 853fa45
1 parent a726b7c
commit 853fa45
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js
@@ -446,6 +446,58 @@ describe('tooltipWithDifferentSymbols', function() {
 
 });
 
+describe( 'tooltip positioning', function() {
+  var elm, elmBody, elmScope, tooltipScope, scope;
+  var $position;
+
+  // load the tooltip code
+  beforeEach(module('ui.bootstrap.tooltip', function ( $tooltipProvider ) {
+    $tooltipProvider.options({ animation: false });
+  }));
+
+  // load the template
+  beforeEach(module('template/tooltip/tooltip-popup.html'));
+
+  beforeEach(inject(function($rootScope, $compile, _$position_) {
+    $position = _$position_;
+    spyOn($position, 'positionElements').andCallThrough();
+
+    scope = $rootScope;
+    scope.text = 'Some Text';
+
+    elmBody = $compile( angular.element(
+      '<div><span tooltip="{{ text }}">Selector Text</span></div>'
+    ))( scope);
+    scope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+  }));
+
+  it( 'should re-position on every digest', inject( function ($timeout) {
+    elm.trigger( 'mouseenter' );
+
+    scope.$digest();
+    $timeout.flush();
+    var startingPositionCalls = $position.positionElements.calls.length;
+
+    scope.$digest();
+    $timeout.flush();
+    expect($position.positionElements.calls.length).toEqual(startingPositionCalls + 1);
+    // Check that positionElements was called with elm
+    expect($position.positionElements.calls[startingPositionCalls].args[0][0])
+      .toBe(elm[0]);
+
+    scope.$digest();
+    $timeout.flush();
+    expect($position.positionElements.calls.length).toEqual(startingPositionCalls + 2);
+    expect($position.positionElements.calls[startingPositionCalls + 1].args[0][0])
+      .toBe(elm[0]);
+    scope.$digest();
+  }));
+
+});
+
 describe( 'tooltipHtmlUnsafe', function() {
   var elm, elmBody, elmScope, tooltipScope, scope;
 

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -122,6 +122,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             var ttScope = scope.$new(true);
 
             var positionTooltip = function () {
+              if (!tooltip) { return; }
 
               var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody);
               ttPosition.top += 'px';
@@ -237,6 +238,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
                   element.after( tooltip );
                 }
               });
+
+              tooltipLinkedScope.$watch(function () {
+                $timeout(positionTooltip, 0, false);
+              });
             }
 
             function removeTooltip() {