Brian Thornton Brian Thornton - 4 years ago 285
HTML Question

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 show where I have a dynamically created 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();

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download