fix(tooltip): link on demand

Attempts to fix angular-ui#1450

Author: chrisirhc

Diff for: src/tooltip/test/tooltip.spec.js

@@ -348,18 +348,12 @@ describe('tooltip', function() {
 
       elm = elmBody.find('input');
       elmScope = elm.scope();
+      elm.trigger('fooTrigger');
       tooltipScope = elmScope.$$childTail;
     }));
 
-    it( 'should not contain a cached reference', function() {
-      expect( inCache() ).toBeTruthy();
-      elmScope.$destroy();
-      expect( inCache() ).toBeFalsy();
-    });
-
     it( 'should not contain a cached reference when visible', inject( function( $timeout ) {
       expect( inCache() ).toBeTruthy();
-      elm.trigger('fooTrigger');
       elmScope.$destroy();
       expect( inCache() ).toBeFalsy();
     }));

Diff for: src/tooltip/tooltip.js

@@ -108,8 +108,11 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
       return {
         restrict: 'EA',
         scope: true,
-        link: function link ( scope, element, attrs ) {
-          var tooltip = $compile( template )( scope );
+        compile: function (tElem, tAttrs) {
+          var tooltipLinker = $compile( template );
+
+          return function link ( scope, element, attrs ) {
+          var tooltip;
           var transitionTimeout;
           var popupTimeout;
           var appendToBody = angular.isDefined( options.appendToBody ) ? options.appendToBody : false;
@@ -154,6 +157,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
                 ttHeight,
                 ttPosition;
 
+            // There can only be one tooltip element per directive shown at once.
+            removeTooltip();
+            tooltip = tooltipLinker(scope);
+
             // Don't show empty tooltips.
             if ( ! scope.tt_content ) {
               return;
@@ -234,11 +241,16 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             // need to wait for it to expire beforehand.
             // FIXME: this is a placeholder for a port of the transitions library.
             if ( scope.tt_animation ) {
-              transitionTimeout = $timeout(function () {
-                tooltip.remove();
-              }, 500);
+              transitionTimeout = $timeout(removeTooltip, 500);
             } else {
+              removeTooltip();
+            }
+          }
+
+          function removeTooltip() {
+            if (tooltip) {
               tooltip.remove();
+              tooltip = null;
             }
           }
 
@@ -313,10 +325,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             $timeout.cancel( transitionTimeout );
             $timeout.cancel( popupTimeout );
             unregisterTriggers();
-            tooltip.remove();
-            tooltip.unbind();
-            tooltip = null;
+            removeTooltip();
           });
+        };
         }
       };
     };