feat(tooltip): add tooltip-template directive

Fixes #220

Author: chrisirhc

src/tooltip/docs/demo.html

@@ -20,6 +20,8 @@
       <a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
       at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
       <a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
+      <a href="#" tooltip-template="myTooltipTemplate.html">Custom template</a>
+      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
     </p>
 
     <p>
@@ -58,4 +60,8 @@
           tooltip-enable="!inputModel" />
       </div>
     </form>
+
+    <script type="text/ng-template" id="myTooltipTemplate.html">
+      <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
+    </script>
 </div>

src/tooltip/docs/readme.md

@@ -1,11 +1,16 @@
 A lightweight, extensible directive for fancy tooltip creation. The tooltip
 directive supports multiple placements, optional transition animation, and more.
 
-There are two versions of the tooltip: `tooltip` and `tooltip-html-unsafe`. The
-former takes text only and will escape any HTML provided. The latter takes
-whatever HTML is provided and displays it in a tooltip; it's called "unsafe"
-because the HTML is not sanitized. *The user is responsible for ensuring the
-content is safe to put into the DOM!*
+There are three versions of the tooltip: `tooltip`, `tooltip-template`, and
+`tooltip-html-unsafe`:
+
+- `tooltip` takes text only and will escape any HTML provided.
+- `tooltip-template` takes text that specifies the location of a template to
+  use for the tooltip.
+- `tooltip-html-unsafe` takes
+  whatever HTML is provided and displays it in a tooltip; it's called "unsafe"
+  because the HTML is not sanitized. *The user is responsible for ensuring the
+  content is safe to put into the DOM!*
 
 The tooltip directives provide several optional attributes to control how they
 will display:

src/tooltip/test/tooltip-template.spec.js

@@ -0,0 +1,65 @@
+describe('tooltip template', function() {
+  var elm,
+      elmBody,
+      scope,
+      elmScope,
+      tooltipScope;
+
+  // load the popover code
+  beforeEach(module('ui.bootstrap.tooltip'));
+
+  // load the template
+  beforeEach(module('template/tooltip/tooltip-template-popup.html'));
+
+  beforeEach(inject(function ($templateCache) {
+    $templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
+  }));
+
+  beforeEach(inject(function($rootScope, $compile) {
+    elmBody = angular.element(
+      '<div><span tooltip-template="{{ templateUrl }}">Selector Text</span></div>'
+    );
+
+    scope = $rootScope;
+    $compile(elmBody)(scope);
+    scope.templateUrl = 'myUrl';
+
+    scope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+  }));
+
+  it('should open on mouseenter', inject(function() {
+    elm.trigger( 'mouseenter' );
+    expect( tooltipScope.isOpen ).toBe( true );
+
+    expect( elmBody.children().length ).toBe( 2 );
+  }));
+
+  it('should not open on mouseenter if templateUrl is empty', inject(function() {
+    scope.templateUrl = null;
+    scope.$digest();
+
+    elm.trigger( 'mouseenter' );
+    expect( tooltipScope.isOpen ).toBe( false );
+
+    expect( elmBody.children().length ).toBe( 1 );
+  }));
+
+  it('should show updated text', inject(function() {
+    scope.myTemplateText = 'some text';
+    scope.$digest();
+
+    elm.trigger( 'mouseenter' );
+    expect( tooltipScope.isOpen ).toBe( true );
+
+    expect( elmBody.children().eq(1).text().trim() ).toBe( 'some text' );
+
+    scope.myTemplateText = 'new text';
+    scope.$digest();
+
+    expect( elmBody.children().eq(1).text().trim() ).toBe( 'new text' );
+  }));
+});
+

src/tooltip/tooltip.js

@@ -434,6 +434,23 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   return $tooltip( 'tooltip', 'tooltip', 'mouseenter' );
 }])
 
+.directive( 'tooltipTemplatePopup', function () {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&',
+      originScope: '&' },
+    templateUrl: 'template/tooltip/tooltip-template-popup.html'
+  };
+})
+
+.directive( 'tooltipTemplate', [ '$tooltip', function ( $tooltip ) {
+  return $tooltip( 'tooltipTemplate', 'tooltipTemplate', 'mouseenter' );
+}])
+
+/*
+Deprecated
+*/
 .directive( 'tooltipHtmlUnsafePopup', function () {
   return {
     restrict: 'EA',

template/tooltip/tooltip-template-popup.html

@@ -0,0 +1,6 @@
+<div class="tooltip {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+  <div class="tooltip-arrow"></div>
+  <div class="tooltip-inner"
+    tooltip-template-transclude="content"
+    tooltip-template-transclude-scope="originScope()"></div>
+</div>