diff --git a/src/popover/test/popover-html.spec.js b/src/popover/test/popover-html.spec.js index fb25ba969e..fd43e51f15 100644 --- a/src/popover/test/popover-html.spec.js +++ b/src/popover/test/popover-html.spec.js @@ -21,6 +21,7 @@ describe('popover', function() { scope.template = $sce.trustAsHtml('My template'); $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 --git a/src/popover/test/popover-template.spec.js b/src/popover/test/popover-template.spec.js index e52c2f8aa8..b46e668b06 100644 --- a/src/popover/test/popover-template.spec.js +++ b/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 --git a/src/tooltip/test/tooltip-template.spec.js b/src/tooltip/test/tooltip-template.spec.js index cec7d4b5cc..e474c6dbc3 100644 --- a/src/tooltip/test/tooltip-template.spec.js +++ b/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 --git a/src/tooltip/test/tooltip2.spec.js b/src/tooltip/test/tooltip2.spec.js index e8df646479..81326e466b 100644 --- a/src/tooltip/test/tooltip2.spec.js +++ b/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('
' + ttipMarkup + '
')($rootScope); + fragment = $compile('
' + ttipMarkup + '
')($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('Trigger here'); + compileTooltip('Trigger here'); 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(''); + compileTooltip(''); 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(''); + compileTooltip(''); 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(''); + compileTooltip(''); $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('Trigger here'); + compileTooltip('Trigger here'); 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('Trigger here'); + compileTooltip('Trigger here'); 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('Trigger here'); + compileTooltip('Trigger here'); 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('Trigger here'); + compileTooltip('Trigger here'); 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(''); + compileTooltip(''); trigger(fragment.find('button'), 'mouseenter'); expect(fragment).toHaveOpenTooltips(); diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index cb3a508561..ae8001db32 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -163,11 +163,14 @@ 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)) { @@ -175,6 +178,13 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s 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.