feat(tooltip): added appendToBody to $tooltip

Tooltips and popovers can now be appended to the body of the HTML
document instead of directly after the element on which the directive
was invoked, by setting `appendToBody` to true through
$tooltipProvider.options().

The tooltip specs were refactored slightly to bucket all
provider-related specs under a single `describe` for cleanliness.

Author: Josh David Miller

src/tooltip/test/tooltip.spec.js

@@ -163,42 +163,79 @@ describe('tooltip', function() {
 
 });
 
-describe('tooltip with popup delay configured through provider', function(){
+describe( '$tooltipProvider', function() {
 
-  var elm,
-    elmBody,
-    scope,
-    elmScope;
+  describe( 'popupDelay', function() {
+    var elm,
+      elmBody,
+      scope,
+      elmScope;
 
-  beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider){
-    $tooltipProvider.options({popupDelay: 1000});
-  }));
+    beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider){
+      $tooltipProvider.options({popupDelay: 1000});
+    }));
 
-  // load the template
-  beforeEach(module('template/tooltip/tooltip-popup.html'));
+    // load the template
+    beforeEach(module('template/tooltip/tooltip-popup.html'));
 
-  beforeEach(inject(function($rootScope, $compile) {
-    elmBody = angular.element(
-      '<div><span tooltip="tooltip text">Selector Text</span></div>'
-    );
+    beforeEach(inject(function($rootScope, $compile) {
+      elmBody = angular.element(
+        '<div><span tooltip="tooltip text">Selector Text</span></div>'
+      );
 
-    scope = $rootScope;
-    $compile(elmBody)(scope);
-    scope.$digest();
-    elm = elmBody.find('span');
-    elmScope = elm.scope();
-  }));
+      scope = $rootScope;
+      $compile(elmBody)(scope);
+      scope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+    }));
 
-  it('should open after timeout', inject(function($timeout) {
+    it('should open after timeout', inject(function($timeout) {
 
-    elm.trigger( 'mouseenter' );
-    expect( elmScope.tt_isOpen ).toBe( false );
+      elm.trigger( 'mouseenter' );
+      expect( elmScope.tt_isOpen ).toBe( false );
 
-    $timeout.flush();
-    expect( elmScope.tt_isOpen ).toBe( true );
+      $timeout.flush();
+      expect( elmScope.tt_isOpen ).toBe( true );
 
-  }));
+    }));
+
+  });
+
+  describe('appendToBody', function() {
+    var elm, 
+        elmBody,
+        scope, 
+        elmScope,
+        body;
+
+    // load the tooltip code
+    beforeEach(module('ui.bootstrap.tooltip', function ( $tooltipProvider ) {
+        $tooltipProvider.options({ appendToBody: true });
+    }));
+
+    // load the template
+    beforeEach(module('template/tooltip/tooltip-popup.html'));
+
+    it( 'should append to the body', inject( function( $rootScope, $compile, $document ) {
+      $body = $document.find( 'body' );
+      elmBody = angular.element( 
+        '<div><span tooltip="tooltip text">Selector Text</span></div>' 
+      );
 
+      scope = $rootScope;
+      $compile(elmBody)(scope);
+      scope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+
+      var bodyLength = $body.children().length;
+      elm.trigger( 'mouseenter' );
+      
+      expect( elmScope.tt_isOpen ).toBe( true );
+      expect( elmBody.children().length ).toBe( 1 );
+      expect( $body.children().length ).toEqual( bodyLength + 1 );
+    }));
+  });
 });
 
-    

src/tooltip/tooltip.js

@@ -21,7 +21,7 @@ angular.module( 'ui.bootstrap.tooltip', [] )
   var globalOptions = {};
 
   /**
-   * The `options({})` allows global configuration of all dialogs in the
+   * `options({})` allows global configuration of all tooltips in the
    * application.
    *
    *   var app = angular.module( 'App', ['ui.bootstrap.tooltip'], function( $tooltipProvider ) {
@@ -37,7 +37,7 @@ angular.module( 'ui.bootstrap.tooltip', [] )
    * Returns the actual instance of the $tooltip service.
    * TODO support multiple triggers
    */
-  this.$get = [ '$window', '$compile', '$timeout', '$parse', function ( $window, $compile, $timeout, $parse ) {
+  this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', function ( $window, $compile, $timeout, $parse, $document ) {
     return function $tooltip ( type, defaultTriggerShow, defaultTriggerHide ) {
       var options = angular.extend( {}, defaultOptions, globalOptions );
 
@@ -66,9 +66,10 @@ angular.module( 'ui.bootstrap.tooltip', [] )
         restrict: 'EA',
         scope: true,
         link: function link ( scope, element, attrs ) {
-          var tooltip = $compile( template )( scope ), 
-              transitionTimeout,
-              popupTimeout;
+          var tooltip = $compile( template )( scope );
+          var transitionTimeout;
+          var popupTimeout;
+          var $body;
 
           attrs.$observe( type, function ( val ) {
             scope.tt_content = val;
@@ -127,7 +128,12 @@ angular.module( 'ui.bootstrap.tooltip', [] )
 
             // Now we add it to the DOM because need some info about it. But it's not 
             // visible yet anyway.
-            element.after( tooltip );
+            if ( options.appendToBody ) {
+                $body = $body || $document.find( 'body' );
+                $body.append( tooltip );
+            } else {
+              element.after( tooltip );
+            }
 
             // Get the position of the directive element.
             position = getPosition( element );