I'm using angularjs so I added a directive in my app.
app.directive('tooltip', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$(element)
.attr('title', scope.$eval(attrs.tooltip))
.tooltip({ placement: "right" });
}
}
})
I want to display the html below or something similar to it, I just want to show a list of customers in the tooltip
<ol>
<li ng-repeat='dt in detail.SelectedCustomers'>{{dt.name}}</li>
</ol>
Below is my table where the tooltip
is located.
<tr ng-repeat="detail in mainCtrl.lineDetails">
<td><a href="#" data-toggle="tooltip" data-placement="right" data-html="true" tooltip="detail.SelectedCustomers"><i class="fa fa-eye fa-lg" aria-hidden="true"></i></a></td>
</tr>
I did a fiddle to show you how you can do
.directive("myTooltip", [ function(){
return{
scope: {
customers:'=myTooltip'
},
link:function(scope, el){
var toDisplay = '';
for(var i = 0; i < scope.customers.length; i++){
toDisplay += scope.customers[i].name+'\n';
}
el.attr('title', toDisplay);