Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 853fa45

Browse files
committed
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 #96 Fixes #1109 Closes #2816 Closes #3435
1 parent a726b7c commit 853fa45

File tree

2 files changed

+57
-0
lines changed

2 files changed

+57
-0
lines changed

src/tooltip/test/tooltip.spec.js

+52
Original file line numberDiff line numberDiff line change
@@ -446,6 +446,58 @@ describe('tooltipWithDifferentSymbols', function() {
446446

447447
});
448448

449+
describe( 'tooltip positioning', function() {
450+
var elm, elmBody, elmScope, tooltipScope, scope;
451+
var $position;
452+
453+
// load the tooltip code
454+
beforeEach(module('ui.bootstrap.tooltip', function ( $tooltipProvider ) {
455+
$tooltipProvider.options({ animation: false });
456+
}));
457+
458+
// load the template
459+
beforeEach(module('template/tooltip/tooltip-popup.html'));
460+
461+
beforeEach(inject(function($rootScope, $compile, _$position_) {
462+
$position = _$position_;
463+
spyOn($position, 'positionElements').andCallThrough();
464+
465+
scope = $rootScope;
466+
scope.text = 'Some Text';
467+
468+
elmBody = $compile( angular.element(
469+
'<div><span tooltip="{{ text }}">Selector Text</span></div>'
470+
))( scope);
471+
scope.$digest();
472+
elm = elmBody.find('span');
473+
elmScope = elm.scope();
474+
tooltipScope = elmScope.$$childTail;
475+
}));
476+
477+
it( 'should re-position on every digest', inject( function ($timeout) {
478+
elm.trigger( 'mouseenter' );
479+
480+
scope.$digest();
481+
$timeout.flush();
482+
var startingPositionCalls = $position.positionElements.calls.length;
483+
484+
scope.$digest();
485+
$timeout.flush();
486+
expect($position.positionElements.calls.length).toEqual(startingPositionCalls + 1);
487+
// Check that positionElements was called with elm
488+
expect($position.positionElements.calls[startingPositionCalls].args[0][0])
489+
.toBe(elm[0]);
490+
491+
scope.$digest();
492+
$timeout.flush();
493+
expect($position.positionElements.calls.length).toEqual(startingPositionCalls + 2);
494+
expect($position.positionElements.calls[startingPositionCalls + 1].args[0][0])
495+
.toBe(elm[0]);
496+
scope.$digest();
497+
}));
498+
499+
});
500+
449501
describe( 'tooltipHtmlUnsafe', function() {
450502
var elm, elmBody, elmScope, tooltipScope, scope;
451503

src/tooltip/tooltip.js

+5
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
122122
var ttScope = scope.$new(true);
123123

124124
var positionTooltip = function () {
125+
if (!tooltip) { return; }
125126

126127
var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody);
127128
ttPosition.top += 'px';
@@ -237,6 +238,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
237238
element.after( tooltip );
238239
}
239240
});
241+
242+
tooltipLinkedScope.$watch(function () {
243+
$timeout(positionTooltip, 0, false);
244+
});
240245
}
241246

242247
function removeTooltip() {

0 commit comments

Comments
 (0)