From a99b3608beb07498e68be5839d8717e34640f286 Mon Sep 17 00:00:00 2001 From: Kury Kruitbosch Date: Tue, 24 Sep 2013 13:28:14 -0600 Subject: [PATCH] fix(tooltip): re-position tooltip after draw Closes #944 --- src/tooltip/tooltip.js | 105 +++++++++++++++++++++++------------------ 1 file changed, 58 insertions(+), 47 deletions(-) diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index 99a9c2bee7..f6d116647f 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -117,6 +117,55 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap var hasRegisteredTriggers = false; var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']); + var positionTooltip = function (){ + var position, + ttWidth, + ttHeight, + ttPosition; + // Get the position of the directive element. + position = appendToBody ? $position.offset( element ) : $position.position( element ); + + // Get the height and width of the tooltip so we can center it. + ttWidth = tooltip.prop( 'offsetWidth' ); + ttHeight = tooltip.prop( 'offsetHeight' ); + + // Calculate the tooltip's top and left coordinates to center it with + // this directive. + switch ( scope.tt_placement ) { + case 'right': + ttPosition = { + top: position.top + position.height / 2 - ttHeight / 2, + left: position.left + position.width + }; + break; + case 'bottom': + ttPosition = { + top: position.top + position.height, + left: position.left + position.width / 2 - ttWidth / 2 + }; + break; + case 'left': + ttPosition = { + top: position.top + position.height / 2 - ttHeight / 2, + left: position.left - ttWidth + }; + break; + default: + ttPosition = { + top: position.top - ttHeight, + left: position.left + position.width / 2 - ttWidth / 2 + }; + break; + } + + ttPosition.top += 'px'; + ttPosition.left += 'px'; + + // Now set the calculated positioning. + tooltip.css( ttPosition ); + + }; + // By default, the tooltip is not open. // TODO add ability to start tooltip opened scope.tt_isOpen = false; @@ -136,8 +185,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap } if ( scope.tt_popupDelay ) { popupTimeout = $timeout( show, scope.tt_popupDelay ); + popupTimeout.then(function(reposition){reposition();}); } else { - scope.$apply( show ); + scope.$apply( show )(); } } @@ -149,14 +199,11 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap // Show the tooltip popup element. function show() { - var position, - ttWidth, - ttHeight, - ttPosition; + // Don't show empty tooltips. if ( ! scope.tt_content ) { - return; + return angular.noop; } // 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 element.after( tooltip ); } - // Get the position of the directive element. - position = appendToBody ? $position.offset( element ) : $position.position( element ); - - // Get the height and width of the tooltip so we can center it. - ttWidth = tooltip.prop( 'offsetWidth' ); - ttHeight = tooltip.prop( 'offsetHeight' ); - - // Calculate the tooltip's top and left coordinates to center it with - // this directive. - switch ( scope.tt_placement ) { - case 'right': - ttPosition = { - top: position.top + position.height / 2 - ttHeight / 2, - left: position.left + position.width - }; - break; - case 'bottom': - ttPosition = { - top: position.top + position.height, - left: position.left + position.width / 2 - ttWidth / 2 - }; - break; - case 'left': - ttPosition = { - top: position.top + position.height / 2 - ttHeight / 2, - left: position.left - ttWidth - }; - break; - default: - ttPosition = { - top: position.top - ttHeight, - left: position.left + position.width / 2 - ttWidth / 2 - }; - break; - } - - ttPosition.top += 'px'; - ttPosition.left += 'px'; + positionTooltip(); - // Now set the calculated positioning. - tooltip.css( ttPosition ); - // And show the tooltip. scope.tt_isOpen = true; + + // Return positioning function as promise callback for correct + // positioning after draw. + return positionTooltip; } // Hide the tooltip popup element.