fix(tooltip): update placement on content change

Given that the recompute of position is a heavy calculation and the only immune placement to this bug was `right` ,
two kind of fixes had to been made:
1. For `left` placement use the right css style option instead of left.
2. For the `top` and `bottom` placement keep reference of the last known middle position of the directive element
  and use it when re-calculating the position with the new tooltip width.

Closes angular-ui#96

src/tooltip/tooltip.js

@@ -116,6 +116,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           var triggers = getTriggers( undefined );
           var hasRegisteredTriggers = false;
           var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']);
+          var position;
 
           // By default, the tooltip is not open.
           // TODO add ability to start tooltip opened
@@ -147,10 +148,15 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             });
           }
 
+          // Set the position of the directive element.
+          function calculatePosition() {
+            position = appendToBody ? $position.offset( element ) : $position.position( element );
+            position.middle = position.left + position.width / 2;
+          }
+
           // Show the tooltip popup element.
           function show() {
-            var position,
-                ttWidth,
+            var ttWidth,
                 ttHeight,
                 ttPosition;
 
@@ -166,7 +172,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             }
 
             // Set the initial positioning.
-            tooltip.css({ top: 0, left: 0, display: 'block' });
+            tooltip.css({ display: 'block' });
 
             // Now we add it to the DOM because need some info about it. But it's not 
             // visible yet anyway.
@@ -176,8 +182,7 @@ 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 );
+            calculatePosition(); // Update position
 
             // Get the height and width of the tooltip so we can center it.
             ttWidth = tooltip.prop( 'offsetWidth' );
@@ -188,32 +193,31 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             switch ( scope.tt_placement ) {
               case 'right':
                 ttPosition = {
-                  top: position.top + position.height / 2 - ttHeight / 2,
-                  left: position.left + position.width
+                  top: position.top + position.height / 2 - ttHeight / 2 + 'px',
+                  left: position.left + position.width + 'px'
                 };
                 break;
               case 'bottom':
                 ttPosition = {
-                  top: position.top + position.height,
-                  left: position.left + position.width / 2 - ttWidth / 2
+                  top: position.top + position.height + 'px',
+                  left: position.middle - ttWidth / 2 + 'px'
                 };
                 break;
               case 'left':
                 ttPosition = {
-                  top: position.top + position.height / 2 - ttHeight / 2,
-                  left: position.left - ttWidth
+                  top: position.top + position.height / 2 - ttHeight / 2 + 'px',
+                  right: document.documentElement.clientWidth - position.left + 'px'
                 };
                 break;
               default:
                 ttPosition = {
-                  top: position.top - ttHeight,
-                  left: position.left + position.width / 2 - ttWidth / 2
+                  top: position.top - ttHeight + 'px',
+                  left: position.middle - ttWidth / 2 + 'px'
                 };
                 break;
             }
 
-            ttPosition.top += 'px';
-            ttPosition.left += 'px';
+            ttPosition = angular.extend({left: 'auto', right: 'auto'}, ttPosition);
 
             // Now set the calculated positioning.
             tooltip.css( ttPosition );
@@ -248,8 +252,13 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           attrs.$observe( type, function ( val ) {
             scope.tt_content = val;
 
-            if (!val && scope.tt_isOpen ) {
-              hide();
+            if (scope.tt_isOpen) {
+              if (!val) {
+                hide();
+              } else if (scope.tt_placement === 'top' || scope.tt_placement === 'bottom') {
+                // Keep tooltip in the middle of the element
+                tooltip.css('left', position.middle - tooltip.prop( 'offsetWidth' ) / 2 + 'px');
+              }
             }
           });