feat(tooltip): Support for tooltip-class configuration

Closes #3126.
angular-ui · Mar 22, 2015 · d784354 · d784354
1 parent 0ecf7fa
commit d784354
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 11 deletions.
diff --git a/src/tooltip/docs/demo.html b/src/tooltip/docs/demo.html
@@ -10,20 +10,36 @@
     <p>
       Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
       sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
-      aliquam. Tincidunt lobortis feugiat vivamus at 
+      aliquam. Tincidunt lobortis feugiat vivamus at
       <a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget
       arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
-      <a href="#" tooltip-placement="right" tooltip="On the Right!">right</a> 
-      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas 
-      <a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a> 
-      pharetra convallis posuere morbi leo urna, 
+      <a href="#" tooltip-placement="right" tooltip="On the Right!">right</a>
+      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
+      <a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a>
+      pharetra convallis posuere morbi leo urna,
       <a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
       at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
       <a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
     </p>
 
     <p>
-      I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
+        I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
+    </p>
+
+    <p>
+        <style>
+            /* Specify styling for tooltip contents */
+            .tooltip.customClass .tooltip-inner {
+                color: #880000;
+                background-color: #ffff66;
+                box-shadow: 0 6px 12px rgba(0,0,0,.175);
+            }
+            /* Hide arrow */
+            .tooltip.customClass .tooltip-arrow {
+                display: none;
+            }
+        </style>
+        I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
     </p>
 
     <form role="form">

diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md
@@ -21,6 +21,7 @@ will display:
   `tooltip-trigger`.
 - `tooltip-append-to-body`: Should the tooltip be appended to `$body` instead of
   the parent element?
+- `tooltip-class`: Custom class to be applied to the tooltip.
 
 The tooltip directives require the `$position` service.
 

diff --git a/src/tooltip/test/tooltip2.spec.js b/src/tooltip/test/tooltip2.spec.js
@@ -101,6 +101,22 @@ describe('tooltip directive', function () {
 
     });
 
+    describe('class', function () {
+
+      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' );
+
+        var ttipElement = fragment.find('div.tooltip');
+        expect(fragment).toHaveOpenTooltips();
+        expect(ttipElement).toHaveClass('custom');
+
+        closeTooltip(fragment.find('span'));
+        expect(fragment).not.toHaveOpenTooltips();
+      });
+
+    });
+
   });
 
   it('should show even after close trigger is called multiple times - issue #1847', function () {
@@ -144,5 +160,4 @@ describe('tooltip directive', function () {
     // One needs to flush deferred functions before checking there is no tooltip.
     expect(fragment).not.toHaveOpenTooltips();
   });
-
 });
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -100,6 +100,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           'title="'+startSym+'title'+endSym+'" '+
           'content="'+startSym+'content'+endSym+'" '+
           'placement="'+startSym+'placement'+endSym+'" '+
+          'class="'+startSym+'class'+endSym+'" '+
           'animation="animation" '+
           'is-open="isOpen"'+
           '>'+
@@ -276,6 +277,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               ttScope.title = val;
             });
 
+            attrs.$observe( prefix+'Class', function ( val ) {
+              ttScope.class = val;
+            });
+
             function prepPlacement() {
               var val = attrs[ prefix + 'Placement' ];
               ttScope.placement = angular.isDefined( val ) ? val : options.placement;
@@ -343,7 +348,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
   return {
     restrict: 'EA',
     replace: true,
-    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
+    scope: { content: '@', placement: '@', class: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-popup.html'
   };
 })
@@ -356,7 +361,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
   return {
     restrict: 'EA',
     replace: true,
-    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
+    scope: { content: '@', placement: '@', class: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html'
   };
 })

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