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

Commit 632aa82

Browse files
cvnwesleycho
authored andcommitted
fix(tooltip): prevent 1px shift in Webkit/Blink
- Only update tooltip position when content changes, instead of every $digest Fixes #3964
1 parent 1e8297b commit 632aa82

File tree

2 files changed

+13
-8
lines changed

2 files changed

+13
-8
lines changed

src/tooltip/test/tooltip.spec.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -474,24 +474,26 @@ describe( 'tooltip positioning', function() {
474474
tooltipScope = elmScope.$$childTail;
475475
}));
476476

477-
it( 'should re-position on every digest', inject( function ($timeout) {
477+
it( 'should re-position when value changes', inject( function ($timeout) {
478478
elm.trigger( 'mouseenter' );
479479

480480
scope.$digest();
481481
$timeout.flush();
482482
var startingPositionCalls = $position.positionElements.calls.count();
483483

484+
scope.text = 'New Text';
484485
scope.$digest();
485486
$timeout.flush();
487+
expect(elm.attr('tooltip')).toBe( 'New Text' );
486488
expect($position.positionElements.calls.count()).toEqual(startingPositionCalls + 1);
487489
// Check that positionElements was called with elm
488490
expect($position.positionElements.calls.argsFor(startingPositionCalls)[0][0])
489491
.toBe(elm[0]);
490492

491493
scope.$digest();
492-
$timeout.flush();
493-
expect($position.positionElements.calls.count()).toEqual(startingPositionCalls + 2);
494-
expect($position.positionElements.calls.argsFor(startingPositionCalls + 1)[0][0])
494+
$timeout.verifyNoPendingTasks();
495+
expect($position.positionElements.calls.count()).toEqual(startingPositionCalls + 1);
496+
expect($position.positionElements.calls.argsFor(startingPositionCalls)[0][0])
495497
.toBe(elm[0]);
496498
scope.$digest();
497499
}));

src/tooltip/tooltip.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
136136
tooltip.css( ttPosition );
137137
};
138138

139+
var positionTooltipAsync = function () {
140+
$timeout(positionTooltip, 0, false);
141+
};
142+
139143
// Set up the correct scope to allow transclusion later
140144
ttScope.origScope = scope;
141145

@@ -246,12 +250,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
246250
}
247251
});
248252

249-
tooltipLinkedScope.$watch(function () {
250-
$timeout(positionTooltip, 0, false);
251-
});
252-
253253
if (options.useContentExp) {
254254
tooltipLinkedScope.$watch('contentExp()', function (val) {
255+
positionTooltipAsync();
255256
if (!val && ttScope.isOpen ) {
256257
hide();
257258
}
@@ -287,6 +288,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
287288
if (!options.useContentExp) {
288289
attrs.$observe( type, function ( val ) {
289290
ttScope.content = val;
291+
positionTooltipAsync();
290292

291293
if (!val && ttScope.isOpen ) {
292294
hide();
@@ -302,6 +304,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
302304

303305
attrs.$observe( prefix+'Title', function ( val ) {
304306
ttScope.title = val;
307+
positionTooltipAsync();
305308
});
306309

307310
function prepPopupClass() {

0 commit comments

Comments
 (0)