diff --git a/src/popover/popover.js b/src/popover/popover.js
index 2bea0a3e10..2e5ed92690 100644
--- a/src/popover/popover.js
+++ b/src/popover/popover.js
@@ -16,4 +16,29 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
 
 .directive( 'popover', [ '$tooltip', function ( $tooltip ) {
   return $tooltip( 'popover', 'popover', 'click' );
+}])
+
+.directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', '$timeout', function ( $http, $templateCache, $compile, $timeout ) {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', compileScope: '&' },
+    templateUrl: 'template/popover/popover-template.html',
+    link: function( scope, iElement ) {
+      scope.$watch( 'content', function( templateUrl ) {
+        if ( !templateUrl ) { return; }
+        $http.get( templateUrl, { cache: $templateCache } )
+        .then( function( response ) {
+          var contentEl = angular.element( iElement[0].querySelector( '.popover-content' ) );
+          contentEl.children().remove();
+          contentEl.append( $compile( response.data.trim() )( scope.compileScope() ) );
+          $timeout( function(){ scope.compileScope().$digest(); } );
+        });
+      });
+    }
+  };
+}])
+
+.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
+  return $tooltip( 'popoverTemplate', 'popover', 'click' );
 }]);
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index c6a610f8f3..1f6e59872c 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -102,6 +102,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           'placement="'+startSym+'tt_placement'+endSym+'" '+
           'animation="tt_animation" '+
           'is-open="tt_isOpen"'+
+          'compile-scope="$parent"'+
           '>'+
         '</div>';
 
@@ -260,7 +261,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             function createTooltip() {
               // There can only be one tooltip element per directive shown at once.
               if (tooltip) {
-                removeTooltip();
+                return;
               }
               tooltip = tooltipLinker(scope, function () {});
 
@@ -268,10 +269,19 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               scope.$digest();
             }
 
-            function removeTooltip() {
+            function removeTooltip( destroy ) {
               if (tooltip) {
-                tooltip.remove();
-                tooltip = null;
+                if (destroy) {
+                  tooltip.remove();
+                  tooltip = null;
+                } else {
+                  // equals to "tooltip.detach();"
+                  angular.forEach( tooltip, function( e ) {
+                    if (e.parentNode) {
+                      e.parentNode.removeChild( e );
+                    }
+                  } );
+                }
               }
             }
 
@@ -344,7 +354,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               $timeout.cancel( transitionTimeout );
               $timeout.cancel( popupTimeout );
               unregisterTriggers();
-              removeTooltip();
+              removeTooltip( true );
             });
           };
         }
diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html
new file mode 100644
index 0000000000..6f13d8b96f
--- /dev/null
+++ b/template/popover/popover-template.html
@@ -0,0 +1,8 @@
+<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+  <div class="arrow"></div>
+
+  <div class="popover-inner">
+      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
+      <div class="popover-content"></div>
+  </div>
+</div>