Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs ng-attr-title not working in chrome browser

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.

like image 876
Deepak raj Avatar asked Nov 21 '22 16:11

Deepak raj


1 Answers

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

like image 114
Nitin Singh Avatar answered Nov 24 '22 08:11

Nitin Singh