feat(tooltip): add appendToBody only attribute support

- Add support for using only `tooltip-append-to-body` without any attribute value to enable appending tooltip to body
angular-ui · Dec 14, 2015 · 815b75b · 815b75b
1 parent e7f709f
commit 815b75b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 3 deletions.
diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md
@@ -42,7 +42,7 @@ will display:
 - `popover-trigger`: What should trigger the show of the popover? See the
   `tooltip` directive for supported values.
 - `popover-append-to-body`_(Default: false)_: Should the popover be appended to `$body` instead of
-  the parent element?  Note that the presence of this attribute without a value implies `true`.
+  the parent element?
 - `popover-is-open` <i class="glyphicon glyphicon-eye-open"></i>
   _(Default: false)_:
   Whether to show the popover.

diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md
@@ -40,7 +40,7 @@ will display:
 - `tooltip-enable`: Is it enabled? It will enable or disable the configured
   `tooltip-trigger`.
 - `tooltip-append-to-body`_(Default: false)_: Should the tooltip be appended to `$body` instead of
-  the parent element?  Note that the presence of this attribute without a value implies `true`.
+  the parent element?
 - `tooltip-class`: Custom class to be applied to the tooltip.
 - `tooltip-is-open` <i class="glyphicon glyphicon-eye-open"></i>
   _(Default: false)_:

diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js
@@ -966,6 +966,48 @@ describe('$uibTooltipProvider', function() {
       expect($body.children().length).toEqual(bodyLength + 1);
     }));
 
+    it('should append to the body when only attribute present', inject(function($rootScope, $compile, $document) {
+      $body = $document.find('body');
+      elmBody = angular.element(
+        '<div><span uib-tooltip="tooltip text" tooltip-append-to-body>Selector Text</span></div>'
+      );
+
+      scope = $rootScope;
+      $compile(elmBody)(scope);
+      scope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      var bodyLength = $body.children().length;
+      trigger(elm, 'mouseenter');
+
+      expect(tooltipScope.isOpen).toBe(true);
+      expect(elmBody.children().length).toBe(1);
+      expect($body.children().length).toEqual(bodyLength + 1);
+    }));
+
+    it('should not append to the body when attribute value is false', inject(function($rootScope, $compile, $document) {
+      $body = $document.find('body');
+      elmBody = angular.element(
+        '<div><span uib-tooltip="tooltip text" tooltip-append-to-body="false">Selector Text</span></div>'
+      );
+
+      scope = $rootScope;
+      $compile(elmBody)(scope);
+      scope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      var bodyLength = $body.children().length;
+      trigger(elm, 'mouseenter');
+
+      expect(tooltipScope.isOpen).toBe(true);
+      expect(elmBody.children().length).toBe(2);
+      expect($body.children().length).toEqual(bodyLength);
+    }));
+
     it('should close on location change', inject(function($rootScope, $compile) {
       elmBody = angular.element(
         '<div><span uib-tooltip="tooltip text">Selector Text</span></div>'

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -533,7 +533,14 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
             var animation = scope.$eval(attrs[prefix + 'Animation']);
             ttScope.animation = angular.isDefined(animation) ? !!animation : options.animation;
 
-            var appendToBodyVal = scope.$eval(attrs[prefix + 'AppendToBody']);
+            var appendToBodyVal;
+            var appendKey = prefix + 'AppendToBody';
+            if (appendKey in attrs && attrs[appendKey] === undefined) {
+              appendToBodyVal = true;
+            } else {
+              appendToBodyVal = scope.$eval(attrs[appendKey]);
+            }
+
             appendToBody = angular.isDefined(appendToBodyVal) ? appendToBodyVal : appendToBody;
 
             // if a tooltip is attached to <body> we need to remove it on