fix(tooltip): oversize tooltip, arrow position

src/tooltip/tooltip.js

@@ -122,19 +122,24 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
 
             var positionTooltip = function (){
               var position,
+                ttPlacement,
                 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.
+              // Get the placement of the tooltip.
+              ttPlacement = scope.tt_placement;
+
+              // Get the height and width of the tooltip.
               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 ) {
+              switch ( ttPlacement ) {
                 case 'right':
                   ttPosition = {
                     top: position.top + position.height / 2 - ttHeight / 2,
@@ -161,14 +166,76 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
                   break;
               }
 
+              // Calculate and apply offsets if tooltip oversized viewport
+              ttPosition = ttPositionWithOffset(ttPosition, ttPlacement, ttWidth, ttHeight);
+
+              // Calculate and apply tooltip arrow position
+              ttArrowPosition(position, ttPosition, ttWidth);
+
               ttPosition.top += 'px';
               ttPosition.left += 'px';
 
               // Now set the calculated positioning.
               tooltip.css( ttPosition );
-
             };
 
+            function ttPositionWithOffset(ttPosition, ttPlacement, ttWidth, ttHeight) {
+              var viewportWidth,
+                viewportHeight,
+                ttPositionOffset;
+
+              viewportWidth = document.body.offsetWidth;
+              viewportHeight = document.body.offsetHeight;
+
+              if ( /bottom|top/.test(ttPlacement)) {
+
+                // Test if tooltip right side oversized right side viewport
+                if ((ttPosition.left + ttWidth) > viewportWidth) {
+                  ttPositionOffset = viewportWidth - (ttPosition.left + ttWidth);
+                  ttPosition.left += ttPositionOffset;
+                }
+
+                // Test if tooltip left side oversized left side viewport
+                if (ttPosition.left < 0) {
+                  ttPositionOffset = 0 - ttPosition.left;
+                  ttPosition.left += ttPositionOffset;
+                }
+              }
+
+              if (/left|right/.test(ttPlacement)) {
+
+                // Test if tooltip down side oversized down side viewport
+                if ((ttPosition.top + ttHeight) > viewportHeight) {
+                  ttPositionOffset = viewportHeight - (ttPosition.top + ttHeight);
+                  console.log(ttPositionOffset);
+                  ttPosition.top += ttPositionOffset;
+                }
+
+                // Test if tooltip up side oversized up side viewport
+                if (ttPosition.top < 0) {
+                  ttPositionOffset = 0 - ttPosition.top;
+                  ttPosition.top += ttPositionOffset;
+                }
+              }
+              return ttPosition;
+            }
+
+            function ttArrowPosition (elPosition, ttPosition, ttWidth) {
+              var $arrow,
+                arrowPositionOffset;
+
+              $arrow = angular.element(document.querySelector('.popover > .arrow'));
+
+              elMiddlePoint = elPosition.left + elPosition.width / 2;
+              ttMiddlePoint = ttPosition.left + ttWidth / 2;
+
+              if (ttMiddlePoint - elMiddlePoint) {
+                arrowPositionOffset = 50 - ((ttMiddlePoint - elMiddlePoint)/ttWidth * 100);
+              }
+
+              $arrow.css({'left': arrowPositionOffset + '%'});
+            }
+
             // By default, the tooltip is not open.
             // TODO add ability to start tooltip opened
             scope.tt_isOpen = false;