add feature for the button in the tooltip to hide the tooltip

src/tooltip/tooltip.js

@@ -36,9 +36,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
    *     $tooltipProvider.options( { placement: 'left' } );
    *   });
    */
-	this.options = function( value ) {
-		angular.extend( globalOptions, value );
-	};
+    this.options = function( value ) {
+        angular.extend( globalOptions, value );
+    };
 
   /**
    * This allows you to extend the set of trigger mappings available. E.g.:
@@ -104,20 +104,22 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
       var startSym = $interpolate.startSymbol();
       var endSym = $interpolate.endSymbol();
       var template = 
-        '<'+ directiveName +'-popup '+
-          'title="'+startSym+'tt_title'+endSym+'" '+
-          'content="'+startSym+'tt_content'+endSym+'" '+
-          'placement="'+startSym+'tt_placement'+endSym+'" '+
-          'animation="tt_animation()" '+
-          'is-open="tt_isOpen"'+
-          '>'+
-        '</'+ directiveName +'-popup>';
+       '<div ' + directiveName + '-popup ' +
+                      'title="' + startSym + 'tt_title' + endSym + '" ' +
+                      'content="' + startSym + 'tt_content' + endSym + '" ' +
+                      'placement="' + startSym + 'tt_placement' + endSym + '" ' +
+                      'animation="tt_animation()" ' +
+                      'is-open="tt_isOpen" ' +
+                      'manual-hide="Hide()" ' +
+                      '>' +
+                    '</div>';
 
       return {
         restrict: 'EA',
         scope: true,
         link: function link ( scope, element, attrs ) {
           var tooltip = $compile( template )( scope );
+          var isTooltipExist = false;
           var transitionTimeout;
           var popupTimeout;
           var $body;
@@ -173,11 +175,16 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
 
             // Now we add it to the DOM because need some info about it. But it's not 
             // visible yet anyway.
-            if ( appendToBody ) {
-                $body = $body || $document.find( 'body' );
-                $body.append( tooltip );
+            // if tooltip is created, just show the old instance
+            if (!isTooltipExist) {
+                if ( appendToBody ) {
+                    $body = $body || $document.find( 'body' );
+                    $body.append( tooltip );
+                } else {
+                    element.after( tooltip );
+                }
             } else {
-              element.after( tooltip );
+                tooltip.show();
             }
 
             // Get the position of the directive element.
@@ -245,12 +252,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
             // need to wait for it to expire beforehand.
             // FIXME: this is a placeholder for a port of the transitions library.
             if ( angular.isDefined( scope.tt_animation ) && scope.tt_animation() ) {
-              transitionTimeout = $timeout( function () { tooltip.remove(); }, 500 );
+              transitionTimeout = $timeout( function () { tooltip.hide(); }, 500 );
             } else {
-              tooltip.remove();
+                //just hide the tooltip instead of remove it, otherwise tooltip need to compile again
+              tooltip.hide();
             }
           }
-
+          //expose the function to scope 
+      scope.Hide = hide;
           /**
            * Observe the relevant attributes.
            */
@@ -309,7 +318,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
             if ( scope.tt_isOpen ) {
               hide();
             } else {
-              tooltip.remove();
+              // Not sure if we should use hide or remove here. if we use remove, tooltip need to recompile
+              tooltip.hide();
             }
           });
         }