CODEWITHSUNDEEP
htmlangularjstooltip
user2598808
user2598808

Reputation: 643

Dynamic Tooltip using AngularJS

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

Upvotes: 9

Views: 15887

Answers (3)

Gustavo M&#225;ximo
Gustavo M&#225;ximo

Reputation: 6160

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>

Upvotes: 2

Jon Biere
Jon Biere

Reputation: 31

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.

Upvotes: 1

user2598808
user2598808

Reputation: 643

Instead of 

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

we need to give

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

Upvotes: 2

Related Questions