Dynamic Tooltip using AngularJS

Question

I want to add a tooltip which would be displayed on mouse hover of the below elements.

<a ng-click="click(this)">
<span class="icon"></span>
</a>
{{product.title}}

I have the tooltip in product.desc. I tried using the below code:

 <span tooltip="{{product.desc}}" class="glyphicon"></span>

But this doesnt work. Any Ideas/Suggestions? please help.

[EDIT] I can see the value of product.desc exists as expected in source of the page when i checked using developer tools.

Thankyou

Answer 1

Instead of

<span tooltip="{{product.desc}}" class="glyphicon"></span> 

we need to give

<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>

Answer 2

None of the answers above solved my problem. This is what worked for me:

Instead of

<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>

we need to say:

<span data-toggle="tooltip" data-original-title="{{product.desc}}" class="glyphicon"></span>

Answer 3

Which version of angular are you using? A couple of things could be happening... I've spent the past 9 months developing angular apps all of which have leveraged the tooltip library.

Assuming you are using the tooltip library from angular-ui

• Make sure you are referencing the angular-ui module in your in app.js module dependencies

angular.module('ValuesEntryApp', ['ui.bootstrap', ...more depedencies,]).config(funciton(){...});

• Angular 1.3 has a known issue with angular-ui tooltips: issue/solution

Other things: You said that even if you use the title tag it still doesn't render a tooltip? I think it depends on what browser you use but I know atleast in chrome that if you hover and hold over an element with a title it will display the title for a short while. Is your glyphicon even rendering on screen? Are there any errors in your console? Give us more info if you still seeking help. I could help get it working for you if we had more info on you dev setup.