Search code examples
javascriptangularjsqtip2

Basic use of qtip2 with AngularJS

I'm trying to use a tooltip from qtip2 inside an ng-repeater.

I'm using the simple title attribute:

$('[title!=""]').qtip();

qtips show in a regular item. However, they do not show within the angular repeater. Inspecting the elements, I can see it did replace the title with old title.

Plunker here: http://plnkr.co/edit/pewJYxbyBdMk5kqm01Bm?p=info

Solution

  • Your problem here is that you're binding qtip to elements that don't exist yet. Your best bet is to create a qtip directive that you can add to your elements and have the qtip() method ran after it's created.

    Example:

    // remove $('[title!=""]').qtip(); from top of js file
app.directive('qtip', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.qtip({ content: attrs.qtip});
    }
  };
});

    Then in your html:

    <span qtip="{{friend.gender}} ({{friend.age}} years old)"> [{{$index + 1}}] {{friend.name}}</span>

    Updated plunkr.