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

Commit a99b360

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

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
@@ -117,6 +117,55 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
117117
var hasRegisteredTriggers = false;
118118
var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']);
119119

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

@@ -149,14 +199,11 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
149199

150200
// Show the tooltip popup element.
151201
function show() {
152-
var position,
153-
ttWidth,
154-
ttHeight,
155-
ttPosition;
202+
156203

157204
// Don't show empty tooltips.
158205
if ( ! scope.tt_content ) {
159-
return;
206+
return angular.noop;
160207
}
161208

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

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

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

225236
// Hide the tooltip popup element.

0 commit comments

Comments
 (0)