Need to get qtip to display correct new javascript html table data that is dynamic

问题

I have a similar question in which I didn't have the right data in a fiddle to show. What the other question shows is doing a table row clone, but my data is table append to a div

The jQuery $.each loop shows where I have a dynamically created the title (tooltip)

This is the fiddle: http://jsfiddle.net/bthorn/Lpuf0x7L/1/

$.each(allData, function (index, issues) {

    strResult += "<tr><td class='nameField'> <a href='#'>" + issues.LAST_NAME + " " + issues.FIRST_NAME + " " + issues.INITIALS + "</a></td><td>" + issues.OFFICE + "</td><td>" + issues.TITLE + "</td>";
    strResult += "<td>" + issues.DEPARTMENT + "</td><td class='alias'>" + issues.ALIAS_NAME + "</td>";
    // NEED TO ADD QTIP to the issues.DEPARTMENT title tooltip   //////
     addTooltips();
    /////////
    strResult += "</tr>";
});
strResult += "</table>";


$("#divEmpResult").html(strResult);

My old question from a few hours with OP answer should be helpful

dynamic javascript data with qtip is overriding all tooltips with same message

I am trying to call this function but i know that I needs to have additional data from qtip appended to it.

OP was doing a .insertBefore(this) but I am not sure how to do that with my table row

 $('button').on('click', function() {
$('<div/>', {
class: 'tips',
text: 'Dynamically inserted.'
}).insertBefore(this);

addTooltips();

回答1:

In the second code snippet, the addTooltips function was called after the dynamic element(s) were inserted into the DOM via the .insertBefore() method.

In your first code snippet, you are calling the addTooltips function before the elements are actually appended, which is why it isn't working as expected:

$("#divEmpResult").html(strResult);
addTooltips(); // Call the function *after* the elements exist in the DOM

In order to prevent the previous tooltips from being overridden, negate all the elements with data-hasqtip attributes. You can also set the tooltip text based on the title attribute, or some pre-defined defaults like in the example below:

$('.tips:not([data-hasqtip])').each(function() {
  $(this).qtip({
    content: {
      text: $(this).attr('title') || 'This is the message!'
    },
    hide: {
      fixed: false
    },
    position: {
      corner: {
        target: 'topLeft',
        tooltip: 'bottomRight'
      }
    }
  });
});

To address your last issue where the tooltips only included the first word, you need to enclose the title attribute value in quotes. Previously, your HTML was being rendered like: title=some words here, which resulted in the browser automatically inserting quotes around the first white-space separated word and turning the following words into separate attributes.

Working Example Here

The title attribute value needs to be enclosed in quotes:

strResult += '<td class="tips" title="' + issues.DEPARTMENT + '">' + issues.DEPARTMENT + '</td><td class="alias">' + issues.ALIAS_NAME + '</td>';

To avoid mistakes like this, I would highly suggest using a JS templating engine such as handlebars.

来源：https://stackoverflow.com/questions/34498956/need-to-get-qtip-to-display-correct-new-javascript-html-table-data-that-is-dynam

标签

javascript

jquery

html

css

qtip2