Angular-ui Bootstrap tooltips not showing in ng-repeat (node-webkit app)

Question

I'm new to angular.js and node-webkit, and I'm struggling to make bootstrap tooltips work in content dynamically loaded via ng-repeat.

First, I've tried using standard bootstrap and did the following : http://jsfiddle.net/nsDFe/3/

app.directive('bsTooltip', function () {
    return function (scope, element, attrs) {
        // trying to register the new tooltips
        element.find('span').tooltip();
    };
});

And this doesn't work (but the "normally" defined tooltip in the first table row works).

Then I tried using angular-ui bootstrap and did the following (thinking it should be kind of "automatic" that the angular library would listen to new dom elements) : http://jsfiddle.net/XTG8k/2/

But no luck either. Could someone point me in the right direction ? I've seen some discussions regarding this here on Stackoverflow but none that really solved my problem. I've heard some vague references to $compile but could not figure how to implement that.

Answer 1

I think you are just going about this the wrong way, you shouldn't be loading html in your dynamically loaded content, you should just be loading the data that you will put in your html template, and then you can do it like this:

http://jsfiddle.net/XTG8k/5/

<tr ng-repeat="foo in bar">
    <td><span tooltip="{{foo.tooltip}}">{{foo.content}}</span></td>
</tr>

Answer 2

I wrote a simple directive for this (supporting ng-repeat):

Example: Tooltips bootstrap angular directive

The idea is to call tooltip() with general options on every loading of "tooltip-loader" element:

angular.module('myApp', ['ui.bootstrap']).directive('tooltipLoader', function() {
    return function(scope, element, attrs) {

      element.tooltip({
        trigger:"hover",
        placement: "top",
        delay: {show: 1000, hide: 0}
      });

    };
  });

Then, you can call it in the view:

  <div ng-repeat="_type in types" data-toggle="tooltip" data-original-title="{{_type.name}}" style="border: 1px solid blue; width: 50px;" tooltip-loader>
    {{_type.name}}
  </div>

  <div data-toggle="tooltip" data-original-title="Zoom reset" style="border: 1px solid blue; width: 100px;" tooltip-loader>
    <span>Zoom reset</span>
  </div>

And example for controller could be:

angular.module('myApp', ['ui.bootstrap']).controller('MainCtrl', ['$scope', function ($scope) {
    $scope.types = [{
        name: 'note',
        iconName: 'icon-text_tool_big'
      }, {
        name: 'rect',
        iconName: 'icon-square_tool_big'
      }, {
        name: 'circle',
        iconName: 'icon-ellipse_tool_big'
      }, {
        name: 'arrow',
        iconName: 'icon-arrow_tool'
      },{
        name: 'path',
        iconName: 'icon-free_line_tool'
      }
    ];

}]);