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>
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>