Bootstrap tooltip non il rendering con angolare ng-repeat

Question

Sto cercando di creare tooltip per la prima riga di una tabella creata attraverso ng-repeat. Ma tooltip non viene eseguito il 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

Succede perché angularjs aggiunge/rimuove gli elementi al volo con ng-repeat (data-binding).

per aggirare questo, è necessario creare una direttiva in modo che ogni volta che si crea il nuovo elemento, il suggerimento è ben avviata.

In primo luogo, è necessario creare la seguente direttiva:

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'); 
      }); 
     } 
    }; 
}); 

quindi includere l'attributo "tooltip" sull'elemento che si desidera visualizzare il tooltip su:

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

Fonte: Using Bootstrap Tooltip with AngularJS

Answer 2

vedi la mia risposta here.

Source-code: here.

L'idea è quella di utilizzare una direttiva:

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

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

    }; 
    });