feat(tooltip): add html support

src/tooltip/docs/tooltip.demo.html

@@ -10,7 +10,7 @@ <h1 id="tooltips">Tooltips <a class="small" href="//github.com/mgcrea/angular-st
   <h2 id="tooltips-examples">Examples</h2>
   <p>Add small overlays of content on hover, to any element for housing secondary information.</p>
 
-  <h3>Live demo</h3>
+  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="tooltip/docs/tooltip.demo.html" data-content-js-url="tooltip/docs/tooltip.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip><i class="fa fa-edit"></i></a></h3>
   <div class="form-group hide">
     <label>Title</label>
     <input type="text" class="form-control" ng-model="tooltip.title" placeholder="Title">
@@ -36,11 +36,6 @@ <h3>Live demo</h3>
 
   </div>
 
-  <div class="callout callout-info">
-    <h4>Two-way data-binding</h4>
-    <p>To prevent databinding issues, "the rule of thumb is, if you use <code>ng-model</code> there has to be a dot somewhere." Miško Hevery.</p>
-  </div>
-
   <h2 id="tooltips-usage">Usage</h2>
   <p>Append a <code>bs-tooltip</code> attribute to any element to enable the directive.</p>
   <div class="callout callout-info">
@@ -60,7 +55,8 @@ <h3>Options</h3>
   <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-tooltip</code> attribute</p>
   <div class="callout callout-info">
     <h4>This module supports exotic placement options!</h4>
-    <p>You can position your popover in corners (such as <code>bottom-left</code>) or any other combination two. Requires some CSS to render properly.</p>
+    <p>You can position your popover in corners (such as <code>bottom-left</code>) or any other combination two.</p>
+    <p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for theses docs.</p>
   </div>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
@@ -95,8 +91,13 @@ <h4>This module supports exotic placement options!</h4>
           <td>title</td>
           <td>string</td>
           <td>''</td>
-          <td>default title value if
-            <code>title</code>attribute isn't present</td>
+          <td>default title value if <code>title</code>attribute isn't present</td>
+        </tr>
+        <tr>
+          <td>html</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
         </tr>
         <tr>
           <td>delay</td>

src/tooltip/docs/tooltip.demo.js

@@ -2,6 +2,12 @@
 
 angular.module('mgcrea.ngStrapDocs')
 
+.config(function($tooltipProvider) {
+  angular.extend($tooltipProvider.defaults, {
+    html: true
+  });
+})
+
 .controller('TooltipDemoCtrl', function($scope) {
   $scope.tooltip = {title: 'Hello Tooltip<br />This is a multiline message!', checked: false};
 });

src/tooltip/test/tooltip.spec.js

@@ -23,14 +23,14 @@ describe('tooltip', function () {
 
   var templates = {
     'default': {
-      scope: {tooltip: {title: 'Hello Tooltip<br>This is a multiline message!'}},
+      scope: {tooltip: {title: 'Hello Tooltip!'}},
       element: '<a title="{{tooltip.title}}" bs-tooltip>hover me</a>'
     },
     'markup-scope': {
       element: '<a bs-tooltip="tooltip">hover me</a>'
     },
     'markup-ngRepeat': {
-      scope: {items: [{name: 'foo', tooltip: 'Hello Tooltip<br>This is a multiline message!'}]},
+      scope: {items: [{name: 'foo', tooltip: 'Hello Tooltip!'}]},
       element: '<ul><li ng-repeat="item in items"><a title="{{item.tooltip}}" bs-tooltip>{{item.name}}</a></li></ul>'
     },
     'options-animation': {
@@ -45,8 +45,12 @@ describe('tooltip', function () {
     'options-trigger': {
       element: '<a data-trigger="click" bs-tooltip="tooltip">click me</a>'
     },
+    'options-html': {
+      scope: {tooltip: {title: 'Hello Tooltip<br>This is a multiline message!'}},
+      element: '<a data-html="1" bs-tooltip="tooltip">hover me</a>'
+    },
     'options-template': {
-      scope: {tooltip: {title: 'Hello Tooltip<br>This is a multiline message!', counter: 0}, items: ['foo', 'bar', 'baz']},
+      scope: {tooltip: {title: 'Hello Tooltip!', counter: 0}, items: ['foo', 'bar', 'baz']},
       element: '<a title="{{tooltip.title}}" data-template="custom" bs-tooltip>hover me</a>'
     }
   };
@@ -153,6 +157,16 @@ describe('tooltip', function () {
 
     });
 
+    describe('html', function () {
+
+      it('should correctly compile inner content', function() {
+        var elm = compileDirective('options-html');
+        angular.element(elm[0]).triggerHandler('mouseenter');
+        expect(sandboxEl.find('.tooltip-inner').html()).toBe(scope.tooltip.title);
+      });
+
+    });
+
     describe('template', function () {
 
       it('should support custom template', function() {

src/tooltip/tooltip.js

@@ -7,7 +7,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
     var template = '' +
       '<div class="tooltip" ng-show="title">' +
         '<div class="tooltip-arrow"></div>' +
-        '<div class="tooltip-inner" ng-bind-html="title"></div>' +
+        '<div class="tooltip-inner" ng-bind="title"></div>' +
       '</div>';
 
     $templateCache.put('$tooltip', template);
@@ -24,16 +24,17 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
       template: '$tooltip',
       trigger: 'hover focus',
       keyboard: false,
-      type: '',
-      // html: false,
+      html: false,
       title: '',
+      type: '',
       delay: 0
     };
 
     this.$get = function($window, $rootScope, $compile, $q, $templateCache, $http, $animate, $timeout, dimensions) {
 
       var trim = String.prototype.trim;
       var requestAnimationFrame = $window.requestAnimationFrame || $window.setTimeout;
+      var htmlReplaceRegExp = /ng-bind="/ig;
 
       // Helper functions
 
@@ -77,6 +78,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
         var tipLinker, tipElement, tipTemplate;
         $tooltip.$promise.then(function(template) {
           if(angular.isObject(template)) template = template.data;
+          if(options.html) template = template.replace(htmlReplaceRegExp, 'ng-bind-html="');
           template = trim.apply(template);
           tipTemplate = template;
           tipLinker = $compile(template);
@@ -326,11 +328,11 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
 
         // Directive options
         var options = {scope: scope};
-        angular.forEach(['placement', 'container', 'delay', 'trigger', 'animation', 'type', 'template'], function(key) {
+        angular.forEach(['placement', 'container', 'delay', 'trigger', 'keyboard', 'html', 'animation', 'type', 'template'], function(key) {
           if(angular.isDefined(attr[key])) options[key] = attr[key];
         });
 
-        // Support scope as data-attrs
+        // Observe scope attributes for change
         angular.forEach(['title'], function(key) {
           attr[key] && attr.$observe(key, function(newValue, oldValue) {
             scope[key] = newValue;