How to make qtip2 tooltips dynamic

Question

When the page loads every tooltip is working perfectly fine but when the data refreshes through ajax then it just stop working how can i make it work??

$(document).ready(function() {
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
    $('.userExtend').each(function() {

        $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                            url: api.elements.target.attr('data-url') // Use href attribute as URL
                        })
                        .then(function(content) {
                            // Set the tooltip content upon successful retrieval
                            api.set('content.text', content);
                        }, function(xhr, status, error) {
                            // Upon failure... set the tooltip content to error
                            api.set('content.text', status + ': ' + error);
                        });

                    return 'Loading...'; // Set some initial text
                }
            },
            position: {
                viewport: $(window)
            },
            hide: {
                fixed: true,
                delay: 300
            },
            style: 'qtip-light'
        });
    });
});

According qtip2 here is how we can make it dynamic http://jsfiddle.net/qTip2/qcwV4/ but I'm new to jquery & unable to integrate it with this code

Answer 1

What the qTip fiddle suggest is a socalled delegated event handler. The trick is to attach a mouseenter handler to a parent element but delegate the event to descendants by the use of a selector - in the fiddle all <a> tags with a title attribute a[title].

You can easily adapt this approach to your own code. You want to bind qTips to any element which has the class .userExtend :

$('body').on('mouseenter', '.userExtend', function() {
  $(this).qtip({
    content: {
      text: function(event, api) {
        $.ajax({
            url: api.elements.target.attr('data-url') // Use href attribute as URL
          })
          .then(function(content) {
            // Set the tooltip content upon successful retrieval
            api.set('content.text', content);
          }, function(xhr, status, error) {
            // Upon failure... set the tooltip content to error
            api.set('content.text', status + ': ' + error);
          });

        return 'Loading...'; // Set some initial text
      }
    },
    position: {
      viewport: $(window)
    },
    hide: {
      fixed: true,
      delay: 300
    },
    style: 'qtip-light'
  });
});

Notice the lack of a ready() handler; it is not necessary and should generally be avoided.