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

Solution 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 += '<tdclass="tips"title="' + issues.DEPARTMENT + '">' + issues.DEPARTMENT + '</td><tdclass="alias">' + issues.ALIAS_NAME + '</td>';

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