fix(tooltip): template type should respect popup class

- Test each option for each tooltip type - Tooltip popup now uses tooltip-classes directive Closes #3569
angular-ui · Apr 30, 2015 · 6af627a · 6af627a
1 parent 34044a7
commit 6af627a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 22 deletions.
diff --git a/src/tooltip/test/tooltip2.spec.js b/src/tooltip/test/tooltip2.spec.js
@@ -4,6 +4,9 @@ describe('tooltip directive', function () {
 
   beforeEach(module('ui.bootstrap.tooltip'));
   beforeEach(module('template/tooltip/tooltip-popup.html'));
+  beforeEach(module('template/tooltip/tooltip-template-popup.html'));
+  beforeEach(module('template/tooltip/tooltip-html-popup.html'));
+  beforeEach(module('template/tooltip/tooltip-html-unsafe-popup.html'));
   beforeEach(inject(function (_$rootScope_, _$compile_, _$document_, _$timeout_) {
     $rootScope = _$rootScope_;
     $compile = _$compile_;
@@ -95,34 +98,55 @@ describe('tooltip directive', function () {
 
   describe('option by option', function () {
 
-    describe('placement', function () {
+    var tooltipTypes = {
+      'tooltip': 'tooltip="tooltip text"',
+      'tooltip-html': 'tooltip-html="tooltipSafeHtml"',
+      'tooltip-html-unsafe': 'tooltip-html-unsafe="tooltip text"',
+      'tooltip-template': 'tooltip-template="\'tooltipTextUrl\'"'
+    };
 
-      it('can specify an alternative, valid placement', function () {
-        var fragment = compileTooltip('<span tooltip="tooltip text" tooltip-placement="left">Trigger here</span>');
-        fragment.find('span').trigger( 'mouseenter' );
+    beforeEach(inject(function ($sce, $templateCache) {
+      $rootScope.tooltipText = 'tooltip text';
+      $rootScope.tooltipSafeHtml = $sce.trustAsHtml('tooltip text');
+      $templateCache.put('tooltipTextUrl', [200, '<span>tooltip text</span>', {}]);
+    }));
 
-        var ttipElement = fragment.find('div.tooltip');
-        expect(fragment).toHaveOpenTooltips();
-        expect(ttipElement).toHaveClass('left');
+    angular.forEach(tooltipTypes, function (html, key) {
 
-        closeTooltip(fragment.find('span'));
-        expect(fragment).not.toHaveOpenTooltips();
-      });
+      describe(key, function () {
 
-    });
+        describe('placement', function () {
+
+          it('can specify an alternative, valid placement', function () {
+            var fragment = compileTooltip('<span ' + html + ' tooltip-placement="left">Trigger here</span>');
+            fragment.find('span').trigger( 'mouseenter' );
+
+            var ttipElement = fragment.find('div.tooltip');
+            expect(fragment).toHaveOpenTooltips();
+            expect(ttipElement).toHaveClass('left');
+
+            closeTooltip(fragment.find('span'));
+            expect(fragment).not.toHaveOpenTooltips();
+          });
+
+        });
+
+        describe('class', function () {
+
+          it('can specify a custom class', function () {
+            var fragment = compileTooltip('<span ' + html + ' tooltip-class="custom">Trigger here</span>');
+            fragment.find('span').trigger( 'mouseenter' );
 
-    describe('class', function () {
+            var ttipElement = fragment.find('div.tooltip');
+            expect(fragment).toHaveOpenTooltips();
+            expect(ttipElement).toHaveClass('custom');
 
-      it('can specify a custom class', function () {
-        var fragment = compileTooltip('<span tooltip="tooltip text" tooltip-class="custom">Trigger here</span>');
-        fragment.find('span').trigger( 'mouseenter' );
+            closeTooltip(fragment.find('span'));
+            expect(fragment).not.toHaveOpenTooltips();
+          });
 
-        var ttipElement = fragment.find('div.tooltip');
-        expect(fragment).toHaveOpenTooltips();
-        expect(ttipElement).toHaveClass('custom');
+        });
 
-        closeTooltip(fragment.find('span'));
-        expect(fragment).not.toHaveOpenTooltips();
       });
 
     });

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -478,7 +478,7 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   return {
     restrict: 'EA',
     replace: true,
-    scope: { title: '@', contentExp: '&', placement: '@', animation: '&', isOpen: '&',
+    scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
       originScope: '&' },
     templateUrl: 'template/tooltip/tooltip-template-popup.html'
   };

diff --git a/template/tooltip/tooltip-popup.html b/template/tooltip/tooltip-popup.html
@@ -1,4 +1,7 @@
-<div class="tooltip {{placement}} {{popupClass}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip"
+  tooltip-animation-class="fade"
+  tooltip-classes
+  ng-class="{ in: isOpen() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" ng-bind="content"></div>
 </div>