Bootstrap tooltip not showing with angular ng-repeat

Question

I am trying to create a tooltip for the first row of a table created using ng-repeat. But the hint 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

This is because angularjs adds / removes elements on the fly using ng-repeat (data binding).

To get around this, you need to create a directive so that whenever a new item is created, the tooltip starts correctly.

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 enable the tooltip attribute for the item you want to include a tooltip 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 the 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} }); }; });