CODEWITHSUNDEEP
angularjsngtable
ps0604
ps0604

Reputation: 1071

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

});

Upvotes: 2

Views: 1622

Answers (1)

Paulo Galdo Sandoval
Paulo Galdo Sandoval

Reputation: 2203

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>

Upvotes: 1

Related Questions