javascript - 在动态元素上使用多个 JQuery UI 工具提示

Question

我正在使用JQuery UI's tooltips对于使用动态元素的页面。它在单个元素上完美工作，但是当我尝试添加多个工具提示时，定义的最后一个工具提示似乎会覆盖现有项目。

例如

$("body").tooltip({
    selector: ".testItem1",
    items: ".testItem1",
    content: "1"
});

$("body").tooltip({
    selector: ".testItem2",
    items: ".testItem2",
    content: "2"
});

在这种情况下，第二个工具提示似乎会覆盖第一个。

示例(仅第二项工具提示有效):https://jsfiddle.net/wce547w7/

是否有其他方法可以向动态元素添加工具提示？或者我可以使用某种类型的属性来允许附加工具提示吗？

编辑:动态元素是在我的控制之外添加的，因此我无法在创建元素的同时添加工具提示。

Answer 1

为什么要使用很多工具提示？

// Add elements
var count = 0;
$(".addItem").on("click", function(){
    count++;
    $("body").append('<div class="testItem">Test ' + count + '</div>');
})

// Add tooltips
$("body").tooltip({
    selector: ".testItem",
    items: ".testItem",
    content: function() {return $(this).html();}

});