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

Commit

Permalink
feat(tooltip): update position dynamically
Browse files Browse the repository at this point in the history
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
  • Loading branch information
chrisirhc committed Mar 27, 2015
1 parent a726b7c commit 853fa45
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 0 deletions.
52 changes: 52 additions & 0 deletions src/tooltip/test/tooltip.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
5 changes: 5 additions & 0 deletions src/tooltip/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down

0 comments on commit 853fa45

Please sign in to comment.