feat(tooltip): add *-append-to-body attribute

The tooltip and popover directives (through the $tooltip service) now support using an attribute in addition to the provider to set a particular tooltip or popover to use $body as the container for the popup element rather than the directive element's parent. Closes #395.
angular-ui · Jun 24, 2013 · d089626 · d089626
1 parent ace7bc6
commit d089626
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md
@@ -15,6 +15,8 @@ will display:
   over the element before the popover shows (in milliseconds)? Defaults to 0.
 - `popover-trigger`: What should trigger the show of the popover? See the
   `tooltip` directive for supported values.
+- `popover-append-to-body`: Should the tooltip be appended to `$body` instead of
+  the parent element?
 
 The popover directives require the `$position` service.
 
diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md
@@ -16,6 +16,8 @@ will display:
 - `tooltip-popup-delay`: For how long should the user have to have the mouse
   over the element before the tooltip shows (in milliseconds)? Defaults to 0.
 - `tooltip-trigger`: What should trigger a show of the tooltip?
+- `tooltip-append-to-body`: Should the tooltip be appended to `$body` instead of
+  the parent element?
 
 The tooltip directives require the `$position` service.
 

diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js
@@ -211,6 +211,33 @@ describe('tooltip', function() {
     }));
   });
 
+  describe( 'with an append-to-body attribute', function() {
+    var scope, elmBody, elm, elmScope;
+
+    beforeEach( inject( function( $rootScope ) {
+      scope = $rootScope;
+    }));
+
+    it( 'should append to the body', inject( function( $compile, $document ) {
+      $body = $document.find( 'body' );
+      elmBody = angular.element( 
+        '<div><span tooltip="tooltip text" tooltip-append-to-body="true">Selector Text</span></div>' 
+      );
+
+      $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 );
+    }));
+  });
+
 });
 
 describe('tooltipWithDifferentSymbols', function() {

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -112,6 +112,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
           var transitionTimeout;
           var popupTimeout;
           var $body;
+          var appendToBody = angular.isDefined( options.appendToBody ) ? options.appendToBody : false;
 
           // By default, the tooltip is not open.
           // TODO add ability to start tooltip opened
@@ -163,7 +164,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
 
             // Now we add it to the DOM because need some info about it. But it's not 
             // visible yet anyway.
-            if ( options.appendToBody ) {
+            if ( appendToBody ) {
                 $body = $body || $document.find( 'body' );
                 $body.append( tooltip );
             } else {
@@ -279,10 +280,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
             }
           });
 
+          attrs.$observe( prefix+'AppendToBody', function ( val ) {
+            appendToBody = angular.isDefined( val ) ? $parse( val )( scope ) : appendToBody;
+          });
+
           // if a tooltip is attached to <body> we need to remove it on
           // location change as its parent scope will probably not be destroyed
           // by the change.
-          if ( options.appendToBody ) {
+          if ( appendToBody ) {
             scope.$on('$locationChangeSuccess', function closeTooltipOnLocationChangeSuccess () {
             if ( scope.tt_isOpen ) {
               hide();