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

Commit 47873cd

Browse files
wesleychowesleycho
committed
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
1 parent 90fa2f6 commit 47873cd

File tree

5 files changed

+34
-14
lines changed

5 files changed

+34
-14
lines changed

‎src/popover/test/popover-html.spec.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ describe('popover', function() {
2121
scope.template = $sce.trustAsHtml('<span>My template</span>');
2222
$compile(elmBody)(scope);
2323
scope.$digest();
24+
$document.find('body').append(elmBody);
2425
elm = elmBody.find('span');
2526
elmScope = elm.scope();
2627
tooltipScope = elmScope.$$childTail;
@@ -87,6 +88,7 @@ describe('popover', function() {
8788
it('should hide popover when template becomes empty', inject(function($timeout) {
8889
elm.trigger('click');
8990
tooltipScope.$digest();
91+
$timeout.flush(0);
9092
expect(tooltipScope.isOpen).toBe(true);
9193

9294
scope.template = '';

‎src/popover/test/popover-template.spec.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ describe('popover template', function() {
2525

2626
scope = $rootScope;
2727
$compile(elmBody)(scope);
28+
$document.find('body').append(elmBody);
2829
scope.templateUrl = 'myUrl';
2930

3031
scope.$digest();
@@ -35,6 +36,7 @@ describe('popover template', function() {
3536

3637
afterEach(function() {
3738
$document.off('keypress');
39+
elmBody.remove();
3840
});
3941

4042
it('should open on click', inject(function() {
@@ -75,6 +77,7 @@ describe('popover template', function() {
7577
it('should hide popover when template becomes empty', inject(function($timeout) {
7678
elm.trigger('click');
7779
tooltipScope.$digest();
80+
$timeout.flush(0);
7881
expect(tooltipScope.isOpen).toBe(true);
7982

8083
scope.templateUrl = '';

‎src/tooltip/test/tooltip-template.spec.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ describe('tooltip template', function() {
7575

7676
it('should hide tooltip when template becomes empty', inject(function($timeout) {
7777
trigger(elm, 'mouseenter');
78+
$timeout.flush(0);
7879
expect(tooltipScope.isOpen).toBe(true);
7980

8081
scope.templateUrl = '';

‎src/tooltip/test/tooltip2.spec.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
describe('tooltip directive', function() {
2-
var $rootScope, $compile, $document, $timeout;
2+
var $rootScope, $compile, $document, $timeout, body, fragment;
33

44
beforeEach(module('ui.bootstrap.tooltip'));
55
beforeEach(module('uib/template/tooltip/tooltip-popup.html'));
@@ -10,6 +10,8 @@ describe('tooltip directive', function() {
1010
$compile = _$compile_;
1111
$document = _$document_;
1212
$timeout = _$timeout_;
13+
14+
body = $document.find('body');
1315
}));
1416

1517
beforeEach(function() {
@@ -39,12 +41,13 @@ describe('tooltip directive', function() {
3941

4042
afterEach(function() {
4143
$document.off('keypress');
44+
fragment.remove();
4245
});
4346

4447
function compileTooltip(ttipMarkup) {
45-
var fragment = $compile('<div>' + ttipMarkup + '</div>')($rootScope);
48+
fragment = $compile('<div>' + ttipMarkup + '</div>')($rootScope);
4649
$rootScope.$digest();
47-
return fragment;
50+
body.append(fragment);
4851
}
4952

5053
function closeTooltip(hostEl, triggerEvt, shouldNotFlush) {
@@ -62,7 +65,7 @@ describe('tooltip directive', function() {
6265

6366
describe('basic scenarios with default options', function() {
6467
it('shows default tooltip on mouse enter and closes on mouse leave', function() {
65-
var fragment = compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
68+
compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
6669

6770
trigger(fragment.find('span'), 'mouseenter');
6871
expect(fragment).toHaveOpenTooltips();
@@ -72,16 +75,17 @@ describe('tooltip directive', function() {
7275
});
7376

7477
it('should not show a tooltip when its content is empty', function() {
75-
var fragment = compileTooltip('<span uib-tooltip=""></span>');
78+
compileTooltip('<span uib-tooltip=""></span>');
7679
trigger(fragment.find('span'), 'mouseenter');
7780
expect(fragment).not.toHaveOpenTooltips();
7881
});
7982

8083
it('should not show a tooltip when its content becomes empty', function() {
8184
$rootScope.content = 'some text';
82-
var fragment = compileTooltip('<span uib-tooltip="{{ content }}"></span>');
85+
compileTooltip('<span uib-tooltip="{{ content }}"></span>');
8386

8487
trigger(fragment.find('span'), 'mouseenter');
88+
$timeout.flush(0);
8589
expect(fragment).toHaveOpenTooltips();
8690

8791
$rootScope.content = '';
@@ -92,7 +96,7 @@ describe('tooltip directive', function() {
9296

9397
it('should update tooltip when its content becomes empty', function() {
9498
$rootScope.content = 'some text';
95-
var fragment = compileTooltip('<span uib-tooltip="{{ content }}"></span>');
99+
compileTooltip('<span uib-tooltip="{{ content }}"></span>');
96100

97101
$rootScope.content = '';
98102
$rootScope.$digest();
@@ -119,7 +123,7 @@ describe('tooltip directive', function() {
119123
describe(key, function() {
120124
describe('placement', function() {
121125
it('can specify an alternative, valid placement', function() {
122-
var fragment = compileTooltip('<span ' + html + ' tooltip-placement="left">Trigger here</span>');
126+
compileTooltip('<span ' + html + ' tooltip-placement="left">Trigger here</span>');
123127
trigger(fragment.find('span'), 'mouseenter');
124128

125129
var ttipElement = fragment.find('div.tooltip');
@@ -133,7 +137,7 @@ describe('tooltip directive', function() {
133137

134138
describe('class', function() {
135139
it('can specify a custom class', function() {
136-
var fragment = compileTooltip('<span ' + html + ' tooltip-class="custom">Trigger here</span>');
140+
compileTooltip('<span ' + html + ' tooltip-class="custom">Trigger here</span>');
137141
trigger(fragment.find('span'), 'mouseenter');
138142

139143
var ttipElement = fragment.find('div.tooltip');
@@ -149,7 +153,7 @@ describe('tooltip directive', function() {
149153
});
150154

151155
it('should show even after close trigger is called multiple times - issue #1847', function() {
152-
var fragment = compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
156+
compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
153157

154158
trigger(fragment.find('span'), 'mouseenter');
155159
expect(fragment).toHaveOpenTooltips();
@@ -169,7 +173,7 @@ describe('tooltip directive', function() {
169173
});
170174

171175
it('should hide even after show trigger is called multiple times', function() {
172-
var fragment = compileTooltip('<span uib-tooltip="tooltip text" tooltip-popup-delay="1000">Trigger here</span>');
176+
compileTooltip('<span uib-tooltip="tooltip text" tooltip-popup-delay="1000">Trigger here</span>');
173177

174178
trigger(fragment.find('span'), 'mouseenter');
175179
trigger(fragment.find('span'), 'mouseenter');
@@ -179,7 +183,7 @@ describe('tooltip directive', function() {
179183
});
180184

181185
it('should not show tooltips element is disabled (button) - issue #3167', function() {
182-
var fragment = compileTooltip('<button uib-tooltip="cancel!" ng-disabled="disabled" ng-click="disabled = true">Cancel</button>');
186+
compileTooltip('<button uib-tooltip="cancel!" ng-disabled="disabled" ng-click="disabled = true">Cancel</button>');
183187

184188
trigger(fragment.find('button'), 'mouseenter');
185189
expect(fragment).toHaveOpenTooltips();

‎src/tooltip/tooltip.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,18 +163,28 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
163163
if (!positionTimeout) {
164164
positionTimeout = $timeout(function() {
165165
var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody);
166+
var initialHeight = angular.isDefined(tooltip.offsetHeight) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');
167+
var elementPos = appendToBody ? $position.offset(element) : $position.position(element);
166168
tooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px' });
169+
var placementClasses = ttPosition.placement.split('-');
167170

168-
if (!tooltip.hasClass(ttPosition.placement.split('-')[0])) {
171+
if (!tooltip.hasClass(placementClasses[0])) {
169172
tooltip.removeClass(lastPlacement.split('-')[0]);
170-
tooltip.addClass(ttPosition.placement.split('-')[0]);
173+
tooltip.addClass(placementClasses[0]);
171174
}
172175

173176
if (!tooltip.hasClass(options.placementClassPrefix + ttPosition.placement)) {
174177
tooltip.removeClass(options.placementClassPrefix + lastPlacement);
175178
tooltip.addClass(options.placementClassPrefix + ttPosition.placement);
176179
}
177180

181+
$timeout(function() {
182+
var currentHeight = angular.isDefined(tooltip.offsetHeight) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');
183+
if (placementClasses.indexOf('top') !== -1 && initialHeight !== currentHeight) {
184+
tooltip.css({top: elementPos.top - currentHeight + 'px'});
185+
}
186+
}, 0, false);
187+
178188
// first time through tt element will have the
179189
// uib-position-measure class or if the placement
180190
// has changed we need to position the arrow.

0 commit comments

Comments
 (0)