fix(tooltip): reposition for placement top

- Reposition the tooltip when the placement option contains top in order to account for resizing of tooltip from right side

Closes #5959

Author: wesleycho

Diff for: src/popover/test/popover-html.spec.js

@@ -21,6 +21,7 @@ describe('popover', function() {
     scope.template = $sce.trustAsHtml('<span>My template</span>');
     $compile(elmBody)(scope);
     scope.$digest();
+    $document.find('body').append(elmBody);
     elm = elmBody.find('span');
     elmScope = elm.scope();
     tooltipScope = elmScope.$$childTail;
@@ -87,6 +88,7 @@ describe('popover', function() {
   it('should hide popover when template becomes empty', inject(function($timeout) {
     elm.trigger('click');
     tooltipScope.$digest();
+    $timeout.flush(0);
     expect(tooltipScope.isOpen).toBe(true);
 
     scope.template = '';

Diff for: src/popover/test/popover-template.spec.js

@@ -25,6 +25,7 @@ describe('popover template', function() {
 
     scope = $rootScope;
     $compile(elmBody)(scope);
+    $document.find('body').append(elmBody);
     scope.templateUrl = 'myUrl';
 
     scope.$digest();
@@ -35,6 +36,7 @@ describe('popover template', function() {
 
   afterEach(function() {
     $document.off('keypress');
+    elmBody.remove();
   });
 
   it('should open on click', inject(function() {
@@ -75,6 +77,7 @@ describe('popover template', function() {
   it('should hide popover when template becomes empty', inject(function($timeout) {
     elm.trigger('click');
     tooltipScope.$digest();
+    $timeout.flush(0);
     expect(tooltipScope.isOpen).toBe(true);
 
     scope.templateUrl = '';

Diff for: src/tooltip/test/tooltip-template.spec.js

@@ -75,6 +75,7 @@ describe('tooltip template', function() {
 
   it('should hide tooltip when template becomes empty', inject(function($timeout) {
     trigger(elm, 'mouseenter');
+    $timeout.flush(0);
     expect(tooltipScope.isOpen).toBe(true);
 
     scope.templateUrl = '';

Diff for: src/tooltip/test/tooltip2.spec.js

@@ -1,5 +1,5 @@
 describe('tooltip directive', function() {
-  var $rootScope, $compile, $document, $timeout;
+  var $rootScope, $compile, $document, $timeout, body, fragment;
 
   beforeEach(module('ui.bootstrap.tooltip'));
   beforeEach(module('uib/template/tooltip/tooltip-popup.html'));
@@ -10,6 +10,8 @@ describe('tooltip directive', function() {
     $compile = _$compile_;
     $document = _$document_;
     $timeout = _$timeout_;
+
+    body = $document.find('body');
   }));
 
   beforeEach(function() {
@@ -39,12 +41,13 @@ describe('tooltip directive', function() {
 
   afterEach(function() {
     $document.off('keypress');
+    fragment.remove();
   });
 
   function compileTooltip(ttipMarkup) {
-    var fragment = $compile('<div>' + ttipMarkup + '</div>')($rootScope);
+    fragment = $compile('<div>' + ttipMarkup + '</div>')($rootScope);
     $rootScope.$digest();
-    return fragment;
+    body.append(fragment);
   }
 
   function closeTooltip(hostEl, triggerEvt, shouldNotFlush) {
@@ -62,7 +65,7 @@ describe('tooltip directive', function() {
 
   describe('basic scenarios with default options', function() {
     it('shows default tooltip on mouse enter and closes on mouse leave', function() {
-      var fragment = compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
+      compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
 
       trigger(fragment.find('span'), 'mouseenter');
       expect(fragment).toHaveOpenTooltips();
@@ -72,16 +75,17 @@ describe('tooltip directive', function() {
     });
 
     it('should not show a tooltip when its content is empty', function() {
-      var fragment = compileTooltip('<span uib-tooltip=""></span>');
+      compileTooltip('<span uib-tooltip=""></span>');
       trigger(fragment.find('span'), 'mouseenter');
       expect(fragment).not.toHaveOpenTooltips();
     });
 
     it('should not show a tooltip when its content becomes empty', function() {
       $rootScope.content = 'some text';
-      var fragment = compileTooltip('<span uib-tooltip="{{ content }}"></span>');
+      compileTooltip('<span uib-tooltip="{{ content }}"></span>');
 
       trigger(fragment.find('span'), 'mouseenter');
+      $timeout.flush(0);
       expect(fragment).toHaveOpenTooltips();
 
       $rootScope.content = '';
@@ -92,7 +96,7 @@ describe('tooltip directive', function() {
 
     it('should update tooltip when its content becomes empty', function() {
       $rootScope.content = 'some text';
-      var fragment = compileTooltip('<span uib-tooltip="{{ content }}"></span>');
+      compileTooltip('<span uib-tooltip="{{ content }}"></span>');
 
       $rootScope.content = '';
       $rootScope.$digest();
@@ -119,7 +123,7 @@ describe('tooltip directive', function() {
       describe(key, function() {
         describe('placement', function() {
           it('can specify an alternative, valid placement', function() {
-            var fragment = compileTooltip('<span ' + html + ' tooltip-placement="left">Trigger here</span>');
+            compileTooltip('<span ' + html + ' tooltip-placement="left">Trigger here</span>');
             trigger(fragment.find('span'), 'mouseenter');
 
             var ttipElement = fragment.find('div.tooltip');
@@ -133,7 +137,7 @@ describe('tooltip directive', function() {
 
         describe('class', function() {
           it('can specify a custom class', function() {
-            var fragment = compileTooltip('<span ' + html + ' tooltip-class="custom">Trigger here</span>');
+            compileTooltip('<span ' + html + ' tooltip-class="custom">Trigger here</span>');
             trigger(fragment.find('span'), 'mouseenter');
 
             var ttipElement = fragment.find('div.tooltip');
@@ -149,7 +153,7 @@ describe('tooltip directive', function() {
   });
 
   it('should show even after close trigger is called multiple times - issue #1847', function() {
-    var fragment = compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
+    compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
 
     trigger(fragment.find('span'), 'mouseenter');
     expect(fragment).toHaveOpenTooltips();
@@ -169,7 +173,7 @@ describe('tooltip directive', function() {
   });
 
   it('should hide even after show trigger is called multiple times', function() {
-    var fragment = compileTooltip('<span uib-tooltip="tooltip text" tooltip-popup-delay="1000">Trigger here</span>');
+    compileTooltip('<span uib-tooltip="tooltip text" tooltip-popup-delay="1000">Trigger here</span>');
 
     trigger(fragment.find('span'), 'mouseenter');
     trigger(fragment.find('span'), 'mouseenter');
@@ -179,7 +183,7 @@ describe('tooltip directive', function() {
   });
 
   it('should not show tooltips element is disabled (button) - issue #3167', function() {
-    var fragment = compileTooltip('<button uib-tooltip="cancel!" ng-disabled="disabled" ng-click="disabled = true">Cancel</button>');
+    compileTooltip('<button uib-tooltip="cancel!" ng-disabled="disabled" ng-click="disabled = true">Cancel</button>');
 
     trigger(fragment.find('button'), 'mouseenter');
     expect(fragment).toHaveOpenTooltips();

Diff for: src/tooltip/tooltip.js

@@ -163,18 +163,28 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
               if (!positionTimeout) {
                 positionTimeout = $timeout(function() {
                   var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody);
+                  var initialHeight = angular.isDefined(tooltip.offsetHeight) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');
+                  var elementPos = appendToBody ? $position.offset(element) : $position.position(element);
                   tooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px' });
+                  var placementClasses = ttPosition.placement.split('-');
 
-                  if (!tooltip.hasClass(ttPosition.placement.split('-')[0])) {
+                  if (!tooltip.hasClass(placementClasses[0])) {
                     tooltip.removeClass(lastPlacement.split('-')[0]);
-                    tooltip.addClass(ttPosition.placement.split('-')[0]);
+                    tooltip.addClass(placementClasses[0]);
                   }
 
                   if (!tooltip.hasClass(options.placementClassPrefix + ttPosition.placement)) {
                     tooltip.removeClass(options.placementClassPrefix + lastPlacement);
                     tooltip.addClass(options.placementClassPrefix + ttPosition.placement);
                   }
 
+                  $timeout(function() {
+                    var currentHeight = angular.isDefined(tooltip.offsetHeight) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');
+                    if (placementClasses.indexOf('top') !== -1 && initialHeight !== currentHeight) {
+                      tooltip.css({top: elementPos.top - currentHeight + 'px'});
+                    }
+                  }, 0, false);
+
                   // first time through tt element will have the
                   // uib-position-measure class or if the placement
                   // has changed we need to position the arrow.