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

Commit 42475fd

Browse files
kkruitpkozlowski-opensource
authored andcommitted
fix(tooltip): re-position tooltip after draw
Closes #944
1 parent 1b53ca0 commit 42475fd

File tree

1 file changed

+58
-47
lines changed

1 file changed

+58
-47
lines changed

src/tooltip/tooltip.js

+58-47
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,55 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
118118
var hasRegisteredTriggers = false;
119119
var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']);
120120

121+
var positionTooltip = function (){
122+
var position,
123+
ttWidth,
124+
ttHeight,
125+
ttPosition;
126+
// Get the position of the directive element.
127+
position = appendToBody ? $position.offset( element ) : $position.position( element );
128+
129+
// Get the height and width of the tooltip so we can center it.
130+
ttWidth = tooltip.prop( 'offsetWidth' );
131+
ttHeight = tooltip.prop( 'offsetHeight' );
132+
133+
// Calculate the tooltip's top and left coordinates to center it with
134+
// this directive.
135+
switch ( scope.tt_placement ) {
136+
case 'right':
137+
ttPosition = {
138+
top: position.top + position.height / 2 - ttHeight / 2,
139+
left: position.left + position.width
140+
};
141+
break;
142+
case 'bottom':
143+
ttPosition = {
144+
top: position.top + position.height,
145+
left: position.left + position.width / 2 - ttWidth / 2
146+
};
147+
break;
148+
case 'left':
149+
ttPosition = {
150+
top: position.top + position.height / 2 - ttHeight / 2,
151+
left: position.left - ttWidth
152+
};
153+
break;
154+
default:
155+
ttPosition = {
156+
top: position.top - ttHeight,
157+
left: position.left + position.width / 2 - ttWidth / 2
158+
};
159+
break;
160+
}
161+
162+
ttPosition.top += 'px';
163+
ttPosition.left += 'px';
164+
165+
// Now set the calculated positioning.
166+
tooltip.css( ttPosition );
167+
168+
};
169+
121170
// By default, the tooltip is not open.
122171
// TODO add ability to start tooltip opened
123172
scope.tt_isOpen = false;
@@ -137,8 +186,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
137186
}
138187
if ( scope.tt_popupDelay ) {
139188
popupTimeout = $timeout( show, scope.tt_popupDelay );
189+
popupTimeout.then(function(reposition){reposition();});
140190
} else {
141-
scope.$apply( show );
191+
scope.$apply( show )();
142192
}
143193
}
144194

@@ -150,14 +200,11 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
150200

151201
// Show the tooltip popup element.
152202
function show() {
153-
var position,
154-
ttWidth,
155-
ttHeight,
156-
ttPosition;
203+
157204

158205
// Don't show empty tooltips.
159206
if ( ! scope.tt_content ) {
160-
return;
207+
return angular.noop;
161208
}
162209

163210
// If there is a pending remove transition, we must cancel it, lest the
@@ -177,50 +224,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
177224
element.after( tooltip );
178225
}
179226

180-
// Get the position of the directive element.
181-
position = appendToBody ? $position.offset( element ) : $position.position( element );
182-
183-
// Get the height and width of the tooltip so we can center it.
184-
ttWidth = tooltip.prop( 'offsetWidth' );
185-
ttHeight = tooltip.prop( 'offsetHeight' );
186-
187-
// Calculate the tooltip's top and left coordinates to center it with
188-
// this directive.
189-
switch ( scope.tt_placement ) {
190-
case 'right':
191-
ttPosition = {
192-
top: position.top + position.height / 2 - ttHeight / 2,
193-
left: position.left + position.width
194-
};
195-
break;
196-
case 'bottom':
197-
ttPosition = {
198-
top: position.top + position.height,
199-
left: position.left + position.width / 2 - ttWidth / 2
200-
};
201-
break;
202-
case 'left':
203-
ttPosition = {
204-
top: position.top + position.height / 2 - ttHeight / 2,
205-
left: position.left - ttWidth
206-
};
207-
break;
208-
default:
209-
ttPosition = {
210-
top: position.top - ttHeight,
211-
left: position.left + position.width / 2 - ttWidth / 2
212-
};
213-
break;
214-
}
215-
216-
ttPosition.top += 'px';
217-
ttPosition.left += 'px';
227+
positionTooltip();
218228

219-
// Now set the calculated positioning.
220-
tooltip.css( ttPosition );
221-
222229
// And show the tooltip.
223230
scope.tt_isOpen = true;
231+
232+
// Return positioning function as promise callback for correct
233+
// positioning after draw.
234+
return positionTooltip;
224235
}
225236

226237
// Hide the tooltip popup element.

0 commit comments

Comments
 (0)