Using Qtip2 inside an Angular Directive Template - angularjs

Question

I am trying to use Qtip2 with Angular Directive Template.
Inside my Angular Directive Template are buttons and they are inside an angular ng-repeat loop.
And inside this ng-repeat loop, there is a unique variable called 'value' which is the name of each button.
So what I want is to use Qtip2 with this directive template that will display the 'value' tooltip.
The directive template looks something like this:
<button ng-mouseover="qtipping(value)"> {{value}} </button>
How do I implement this? I tried add an attribute to the button with a ng-mouseover="qtipping(value)" but it doesn't work.
The code inside my link function looks something like this:
link: function(scope,element,attrs){
scope.qtipping = function(value){
$("button").qtip({
content:{
text: value //This will appear the unique name of the button
}
})
}
}
When I run the code, basically nothing happens. I mouseover the buttons with nothing. No error too.
The code that works is:
link: function(scope,element,attrs){
$("button").qtip({
content:{
text: "TestMessage" //This will appear the unique name of the button
}
})
}
Without using a function. But I need a FUNCTION to extract the 'value' from the template dom. How do I go about doing this? I am also quite noob in Angular.

Answer 1

You should create a separate directive to show qtip on each button. Here is a directive to add qtip to an element:
.directive('qtip', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).qtip({
content: {
text: attrs.qtipText
}
});
}
};
}
use it like this:
<button qtip qtip-text="{{value}}"> {{value}} </button>
EDIT: The code had a missing brace. Fixed that, here is a working plunker: http://plnkr.co/edit/uVdpf5gLILd82dr62V03?p=preview