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?

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
– butYouDontLookLikeADeveloper, Commented Mar 8, 2015 at 9:36
Dylan Watson gave you the simplest and the most efficient answer how to do this. — dfsq
– 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
– butYouDontLookLikeADeveloper, Commented Mar 8, 2015 at 9:52

Community · Accepted Answer · 2017-05-23 12:26:17Z

15

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)

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Mar 8, 2015 at 9:14

Dylan Watson

2,3232 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dylan Watson Over a year ago

The html 'title' attribute will show the text when you mouseover the element (In this case, the td element)

butYouDontLookLikeADeveloper Over a year ago

This is printing {{project.inrtcvalue}}, rather than the actual value

Dylan Watson Over a year ago

Interesting.. Is your ng-repeat displaying the values within your table correctly?

dfsq Over a year ago

Here is a demo of it working (first column): plnkr.co/edit/RQOTmteiJ86ZjENEzE1p?p=info

dfsq Over a year ago

@maaartinus Script path was broken. plnkr.co/edit/upuGp6IoSXqLdaAi3kX5?p=preview

|

Kamran · Accepted Answer · 2015-03-08 09:14:26Z

5

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

answered Mar 8, 2015 at 9:14

Kamran

2,7412 gold badges19 silver badges24 bronze badges

1 Comment

butYouDontLookLikeADeveloper Over a year ago

How would I show the bubble showing the text on hover if I follow that example?

Collectives™ on Stack Overflow

How to display text in hover over in angularjs?

2 Answers 2

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Related