Bootstrap tooltip not rendering with angular ng-repeat

Question

I am trying to create tooltip for first row of a table created through ng-repeat. But tooltip is not rendering.

HTML

 <tr ng-repeat="item in govtFiltered>
  <td class="name" data-toggle="tooltip" data-content="{{item.hospitalName}}" title="{{item.hospitalName}}"></td>
</tr>

<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

Answer 1

It happens because angularjs adds / removes elements on the fly with ng-repeat (data-binding).

To circumvent this, you need to create a directive so that whenever the new element is created, the tooltip is properly initiated.

First, you need to create the following directive:

app.directive('bsTooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                // on mouseenter
                $(element).tooltip('show');
            }, function(){
                // on mouseleave
                $(element).tooltip('hide');
            });
        }
    };
});

Then include the "tooltip" attribute on the element you want the tooltip to appear on:

<a href="" title="My Tooltip!" bs-tooltip>My Tooltip Link</a>

Source: Using Bootstrap Tooltip with AngularJS

Answer 2

See my answer here.

Source-code: here.

The idea is to use a directive:

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

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

    };
  });