How to display text in hover over in angularjs?

Question

I am very new to AngularJS. I want to display {{Project.inrtcvalue}} when the mouse is hovered over values. How can I do this in AngularJS?

<table ng-table="tableParams" show-filter="true" class="table" >
    <tr  ng-class="{'danger': project.rag <= 35, 'warning': project.rag > 35 && project.rag < 70  , 'success': project.rag > 70}" ng-repeat="project in $data">
        <td data-title="'PRN'" sortable="'prn'" filter="{'prn': 'text'}">
            {{project.prn}}
        </td>
    </tr>
</table>

So when the user hovers over these <td> I want to display a value from a controller. How do I do this? What is the best way to do this?

Answer 1

You should simply be able to use the {{variable}} notation within a HTML title tag.

So something like:

<td title="{{project.inrtcvalue}}">

See this plunkr for an example (Thanks dfsq)

Answer 2

You can use ng-mouseover and ng-show directives to accomplish this.Following is the example. Example .Hope it helps to get you started.