0

I have a problem to display a tooltip with the title attribute with AngularJS with multipe {{ }}. I'm making kind of a calendar.

I have this :

        <tr ng-repeat="horaire in triPlan(planning)">
            <td>A</td>
            <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
            title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
        </tr>

But when I hover the TD element, it displays this " {{rdv.nom}} is {{rdv.age}} year old ". And if I put only one {{ expression }} in the title attribute, it works perfectly.

How put multiple {{ }} expressions in this title attribute ?

UPDATE : PROBLEM SOLVED

You can see in the answers and comments below that I use the 1.6.4 AngularJS Version.

The ng-attr-title don't work for me in a ng-repeat itself inside a ng-repeat. So, I don't know really why but after some tests, I put this line code :

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>

And I was surprised to see that it works !! title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}

There some differences between the version, I don't know why in a older version it works and in a newer it doesn't.

FINALLY the result to make it works, thanks to @georgeawg. It's to combine the two or more interpolation in only one (The text is in French, don't worry) :

title="{{rdv.nom+' a l\'âge :  '+rdv.age+' et vient pour : '+rdv.text}}"

Thanks everyone !

Krakito
  • 43
  • 2
  • 8
  • Angular version? – John May 09 '17 at 08:56
  • Possible duplicate of [How do you get AngularJS to bind to the title attribute of an A tag?](http://stackoverflow.com/questions/18230868/how-do-you-get-angularjs-to-bind-to-the-title-attribute-of-an-a-tag) – John May 09 '17 at 09:01
  • I have the 10 digest aborting error so it's difficult to find an error about the title. (When I let the title attribute empty, the aborting error is still here but no matter). My Angular version is 1.6.4 – Krakito May 09 '17 at 09:05
  • When you mix jQuery and Angular, you ask for problems. Consider using [UI-Bootstrap tooltips](https://angular-ui.github.io/bootstrap/#!#tooltip) which are properly integrated with the AngularJS framework and its digest cycle. – georgeawg May 09 '17 at 18:53
  • Try combing the two interpolations into one: `{{rdv.nom+' is '+rdv.age+' year old'}}`. – georgeawg May 09 '17 at 19:05
  • @georgeawg Omg, you are my saver. I didn't know that we can do this. And its WORKS perfectly ! I have to say that I love you.. Seriously, thanks a lot, I gonna EDIT the first ask to explain the solution. – Krakito May 10 '17 at 06:55

3 Answers3

3

Use ng-attr-title. From the angularJS documentation:

Web browsers are sometimes picky about what values they consider valid for attributes.

If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding it will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers...

<td class="abraca" ng-click="selectionHoraire(horaire)" 
    ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
        ng-attr-title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
Community
  • 1
  • 1
bamtheboozle
  • 5,847
  • 2
  • 17
  • 31
  • yes exactly, you will have to write something like ` ` – MehulJoshi May 09 '17 at 09:00
  • @Krakito, perhaps [this question](http://stackoverflow.com/questions/30589402/angularjs-ng-attr-title-not-working-in-chrome-browser) may help? – bamtheboozle May 09 '17 at 09:19
  • @Dragoş Paul Marinescu I try few things with your redirection. And, I see that the angular version is really important. I'm using the angular.js 1.6.4 version and it doesnt work, and for the angular.min.js of 1.2.9 version works perfectly. – Krakito May 09 '17 at 10:38
  • @Krakito, here's a working fiddle with angular 1.6.4: [link](https://jsfiddle.net/1wb3sd87/). What browser are you using? – bamtheboozle May 09 '17 at 10:52
  • @Dragoş Paul Marinescu I try your code on my html page and it's working perfectly... maybe it's my table that confusing this work... because when i put the ng-attr-title on my TD element, so no tooltip appear when hover. I was on Chrome but after you asked I tried on Firefox and it's the exactly same result on both... – Krakito May 09 '17 at 12:18
0

Ok, I found out something thanks to @Dragos Paul Marinescu redirection question.

I found out that if I use the angular.js of the version 1.6.4. The tooltip don't display correctly, but if I use the angular.min of the version 1.2.9, its works perfectly...

I had this : 

<script type="text/javascript" src="angular.js"></script>

And if I add this in my HTML : 

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>

Now it works perfectly... Thanks...But I really don't understand why it makes this. Why a higher version don't make the tooltip works ? And it's a dirty way I think to put this two lines together to make my app works...

Krakito
  • 43
  • 2
  • 8
  • 1
    It means they changed something in a later version and you need to find out what. What you're doing now probably isn't viable with this new change. It's not a good idea to downgrade to get the functionality working, it's best to make it work on the latest version to avoid issues down the line. – webnoob May 09 '17 at 13:18
0

Combine the two interpolations into one:

<!-- BEFORE
<tr ng-repeat="horaire in triPlan(planning)">
    <td>A</td>
    <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
    title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
</tr>
-->

<!--AFTER -->
<tr ng-repeat="horaire in triPlan(planning)">
    <td>A</td>
    <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
    title="{{rdv.nom+' is '+rdv.age+' year old'}}">{{rdv.nom}}</td>
</tr>

For more information, see AngularJS Developer Guide - Expressions

georgeawg
  • 48,608
  • 13
  • 72
  • 95