ps0604 ps0604 - 2 months ago 56
AngularJS Question

ngTable tooltip (title attribute) does not show data values

In this plunk I have an ngTable with two columns. When I hover over the data, the tooltip shows the column name instead of the value. This is because the

title
attribute of
td
is set with the column name. How to fix it to show the actual value?

HTML

<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<tr ng-repeat="u in data">
<td title="u.uid">{{ u.uid }}</td>
<td title="u.ugr">{{ u.ugr }}</td>
</tr>
</tbody>
</table>


Javascript

var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {

$scope.data = [
{ uid: 'User 1',ugr: 'Group 1'},
{ uid: 'User 2', ugr: 'Group 2'}
];

$scope.tableParams = new NgTableParams({dataset: $scope.data});

});

Answer

You can use on your td this:

<td ng-attr-title="{{u.uid}}">{{ u.uid }}</td>
<td ng-attr-title="{{u.ugr}}">{{ u.ugr }}</td>
Comments