How to bind title attribute value in ng-table

Question

I am using ng-table to display all values in a table view. Message to be displayed in remarks column (last column of the table) is huge. So, I am displaying few character. When user hovers over the cells I want to show the entire message in a tool-tip. I tried to set it in title attribute, but it's not working.

Sample code : http://plnkr.co/edit/I4nCTNhMfxgbBX7Zjxs9?p=preview

<table ng-table="tableParams" class="table">
        <tr ng-repeat="doc in $data">
        <td data-title="'#'" sortable="doc_name">{{$index + 1 }}</td>
        <td data-title="'Visa Type'" sortable="'type'">{{doc.type}}</td>
        <td data-title="'Country'" sortable="'country'">{{doc.country}}</td>
        <td data-title="'Starting Date'" sortable="'start_date'">{{doc.start_date}}</td>
        <td data-title="'Expired Date'" sortable="'end_date'">{{doc.end_date}}</td>
        <td data-title="'Remarks'" sortable="'remarks'" title="{{doc.remarks}}">
        {{doc.remarks | limitTo: 15 }} {{doc.remarks.length > 15 ? '...' : ''}}
        </td>
        </tr>
</table>

Please suggest me how to show tool-tip using HTML title attribute.

Answer 1

I think you can use the ng-attr-title for that, so basicly your code remains the same, but just before 'title=' you add 'ng-attr-'. So your last line would like like: <td data-title="'Remarks'" sortable="'remarks'" ng-attr-title="{{doc.remarks}}">

I haven't tested this on table cells before, but theoretically it should do the trick :-)

UPDATE

See this working plunkr: http://plnkr.co/edit/WHm04jGoiE3oZi244fqj?p=preview

As you can see I made ng-table.js local, and then in index.html I put the ng-attr-title in front of the ng-table attributes.