I am using ng-table to display all values in table grid view. I want to display some messages when user hover the cell. So I am using ng-attr-title as a tool-tip. It's working in firfox, but it's not working in google chrome web browser.
SamplePlunker
Thanks.
That's because Angular turns it into data-title="Something". You can use CSS to display the data-title attribute, or alternatively you can use title="{{ 'Something' }} if you want the HTML title attribute.
It seems we have discuss it in other Question Here. Use Div there for resolving this issue.
I have Edited your HTML BLOCK:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<table ng-table="tableParams" class="table" ng-controller="ctrl">
<tbody>
<tr ng-repeat="foo in data">
<td data-title="'Name'">{{foo.name}}</td>
<td data-title="'Age'">{{foo.age}}</td>
<td ng-attr-title="{{foo.Desc}}" data-title="'Remarks'" >
<div ng-attr-title="{{foo.Desc}}">{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Complete Code with Script see this PLUNKER
this is what happens when you do multiple things for the same objective.
Choose one way and you can defiantly achieve what you want to.
ng-attr-title::
<td ng-attr-title="{{foo.Desc}}" >
{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}
</td>
just title:
<td title="{{foo.Desc}}" >
{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}
</td>
