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?

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?

• javascript
• jquery
• css
• angularjs

• You want to show it where? – dfsq Commented Mar 8, 2015 at 9:23
• Just like how you would hover over a box(<td>) and I want a little bubble showing a value when a user hover over the <td> – butYouDontLookLikeADeveloper Commented Mar 8, 2015 at 9:36
• Dylan Watson gave you the simplest and the most efficient answer how to do this. – dfsq Commented Mar 8, 2015 at 9:41
• There is a problem with that, It is not printing the value, it is just print the expression as it is : {{project.inrtcvalue}} – butYouDontLookLikeADeveloper Commented Mar 8, 2015 at 9:52

2 Answers 2

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)

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