需要让 qtip 显示正确的新 javascript html table 动态数据

Question

我有一个类似的问题，我没有在 fiddle 中显示正确的数据。另一个问题显示的是进行 table 行克隆，但我的数据是 table 附加到 div

jQuery $.each 循环显示了我动态创建标题的位置（工具提示）

这是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);

我几个小时前提出的老问题和 OP 答案应该会有帮助

我正在尝试调用此函数，但我知道我需要附加来自 qtip 的额外数据。

OP 正在执行 .insertBefore(this) 但我不确定如何使用我的 table 行

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

addTooltips();

Answer 1

在第二个代码片段中，addTooltips 函数在动态元素通过 [= 插入到 DOM 之后被调用 14=]方法。

在您的第一个代码片段中，您在 元素实际附加之前调用了 addTooltips 函数，这就是它没有按预期工作的原因：

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

为了防止之前的tooltips被覆盖，将所有具有data-hasqtip属性的元素取反。您还可以根据标题属性或一些 pre-defined 默认值设置工具提示文本，如下例所示：

$('.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' } } }); });

要解决工具提示仅包含第一个单词的最后一个问题，您需要将 title 属性值括在引号中。以前，您的 HTML 被呈现为：title=some words here，这导致浏览器自动在第一个 white-space 分隔词周围插入引号，并将以下词转换为单独的属性。

Working Example Here

title属性值需要用引号引起来：

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

为避免此类错误，我强烈建议使用 JS 模板引擎，例如 handlebars。

需要让 qtip 显示正确的新 javascript html table 动态数据

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

html

javascript

css

jquery

qtip2