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>