diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index d7afc7d1fd..76ec9d25f4 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -421,6 +421,27 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   };
 }])
 
+// Apply animate class without animating itself
+.directive('tooltipAnimateClass', function () {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+      if (scope.animation()) {
+        element.addClass(attrs.tooltipAnimateClass);
+      }
+    }
+  };
+})
+
+.directive('tooltipPlacementClass', function () {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+      element.addClass(scope.placement);
+    }
+  };
+})
+
 .directive( 'tooltipPopup', function () {
   return {
     restrict: 'EA',
diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html
index 43731c8284..0d3fca4521 100644
--- a/template/popover/popover-template.html
+++ b/template/popover/popover-template.html
@@ -1,4 +1,7 @@
-<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="popover"
+  tooltip-placement-class
+  tooltip-animate-class="fade"
+  ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
   <div class="popover-inner">
diff --git a/template/popover/popover.html b/template/popover/popover.html
index 5929ee6e6a..1fd11a2656 100644
--- a/template/popover/popover.html
+++ b/template/popover/popover.html
@@ -1,4 +1,7 @@
-<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="popover"
+  tooltip-placement-class
+  tooltip-animate-class="fade"
+  ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
   <div class="popover-inner">