Dynamic Javascript Data With Qtip Is Overriding All Tooltips With Same Message

I have a loop in which many different unique toolbar (title) messages appear. This jsfiddle shows the problem I'm having. If you rollover the default textbox that is there you cor

Solution 1:

One approach would be to pass the cloned .tips descendant elements directly to the loadQtips function. In doing so, the elements are scoped correctly, and the qTips are only initialized on the new elements.

Updated Example

// ...while (count-- > 0) {
  $cloned = first_row.clone();
  loadQtip($cloned.find('.tips'));
  $cloned.appendTo('#blacklistgrid');
}

// ...functionloadQtip(selector) {
    $(selector).qtip({
      // ...
    });
}

// ...

Alternatively, it's worth pointing out that the attribute data-hasqtip is added to all element that have tooltips initialized. Therefore you could simply negate all .tips elements that have a data-hasqtip attribute using the selector .tips:not([data-hasqtip]).

However, that doesn't actually work in your case because you are cloning the element that already have that attribute. You could work around that by cloning the elements before they have that attribute.

Example Here

functionloadQtip(selector) {
    $('.tips:not([data-hasqtip])').qtip({
      // ...
    });
}