refactor(tooltip): make tooltip-class more robust

- Add tooltip-class support to tooltip-template
- Remove observer for tooltip-class, it’s evaluated once on tooltip
  preparation instead
- Remove interpolation on class attribute
  Interpolation on the class attribute can have undesirable mangling
  effects when use with a directive that has `replace: true`. It also
  doesn’t work properly with ngAnimate.

Relates to angular-ui#3126

src/tooltip/tooltip.js

@@ -262,6 +262,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             }
 
             function prepareTooltip() {
+              prepPopupClass();
               prepPlacement();
               prepPopupDelay();
             }
@@ -291,9 +292,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               ttScope.title = val;
             });
 
-            attrs.$observe( prefix+'Class', function ( val ) {
-              ttScope.popupClass = val;
-            });
+            function prepPopupClass() {
+              ttScope.popupClass = attrs[prefix + 'Class'];
+            }
 
             function prepPlacement() {
               var val = attrs[ prefix + 'Placement' ];
@@ -426,27 +427,28 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   };
 }])
 
-// Apply animate class without animating itself
-.directive('tooltipAnimateClass', function () {
+/**
+ * Note that it's intentional that these classes are *not* applied through $animate.
+ * They must not be animated as they're expected to be present on the tooltip on
+ * initialization.
+ */
+.directive('tooltipClasses', function () {
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
+      if (scope.placement) {
+        element.addClass(scope.placement);
+      }
+      if (scope.popupClass) {
+        element.addClass(scope.popupClass);
+      }
       if (scope.animation()) {
-        element.addClass(attrs.tooltipAnimateClass);
+        element.addClass(attrs.tooltipAnimationClass);
       }
     }
   };
 })
 
-.directive('tooltipPlacementClass', function () {
-  return {
-    restrict: 'A',
-    link: function (scope, element, attrs) {
-      element.addClass(scope.placement);
-    }
-  };
-})
-
 .directive( 'tooltipPopup', function () {
   return {
     restrict: 'EA',

template/popover/popover-template.html

@@ -1,6 +1,6 @@
 <div class="popover"
-  tooltip-placement-class
-  tooltip-animate-class="fade"
+  tooltip-animation-class="fade"
+  tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 

template/popover/popover.html

@@ -1,6 +1,6 @@
 <div class="popover"
-  tooltip-placement-class
-  tooltip-animate-class="fade"
+  tooltip-animation-class="fade"
+  tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 

template/tooltip/tooltip-html-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-html="contentExp()"></div>
 </div>

template/tooltip/tooltip-html-unsafe-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" bind-html-unsafe="content"></div>
 </div>

template/tooltip/tooltip-template-popup.html

@@ -1,4 +1,7 @@
-<div class="tooltip {{placement}}" 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"
     tooltip-template-transclude="content"