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 correctly see title test which is in:

<tr>
    <td class="tips" title='title test'>
        test this
    </td>
    <td>
        adf
    </td>
</tr>

I have a loop in which it simulates my production code albeit it is not unique data, but the issue is that it is completely changing all the titles including the existing title for the tooltip (title) on hover to be

content: 'This is the message!',

I realize that the code in the function loadQtip() is not specific enough to only change newly added titles to the newly added rows, but I am not sure how to target the new ones.

Currently as you see I am only targeting class='tips'

http://jsfiddle.net/bthorn/tw6mLcL1/

New fiddle that is showing OP answer along with data that is very close to my own

http://jsfiddle.net/bthorn/Lpuf0x7L/1/

回答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');
}

// ...

function loadQtip(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

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

来源：https://stackoverflow.com/questions/34497097/dynamic-javascript-data-with-qtip-is-overriding-all-tooltips-with-same-message

标签

javascript

jquery

html

css

qtip2