Javascript QTip2多个元素，相同的工具提示

我有一个页面，在其中动态创建需要工具提示的元素

我尝试了几种不同的方法，并在网上寻找一些答案，但都无济于事

到目前为止，我有：

var $links = $('a.link');
var len = $links.length;
for(var i = 0; i < len; i++){
    var $ele = $($links[i]);
    $ele.qtip({
        id: 'editLink',
        overwrite: false,
        content: {
            text: $linkEditor,
            title: {
                text: 'Edit Link',
                button: true
            }
        },
        position: {
            my: 'top center',
            at: 'bottom center',
            viewport: $(window)
        },
        show: {
            event: 'mouseover',
            solo: true
        },
        hide: false,
        style: {classes: 'ui-tooltip-shadow ui-tooltip-red'}
    });
}

var$links=$（'a.link'）；
var len=$links.length；
对于（变量i=0；i

我要寻找的是让所有这些元素使用完全相同的工具提示的方法。我希望它们都使用完全相同的内容（在本例中为单个表单），并以完全相同的方式引用工具提示（通过id为“ui tooltip editLink”的tooltip元素）

根据我所拥有的，它当前会正确地创建第一个工具提示，但是如果我添加新元素并重新指定工具提示，它会为新元素创建一个具有不同id的全新工具提示

---

有人知道实现多元素、相同工具提示方法的方法吗？

为了在动态创建的元素中使用

qtip

，您需要在元素初始化过程中包括

qtip

e、 g

$（'abc123'）.appendTo（“body”）.qtip（{content:“test”}）；

很遗憾，我们需要为每个悬停/单击元素克隆Tooltip元素

---

Craig在GitHub一期中提到了这一点：

我已经想出了如何让一个工具提示div被许多工具提示图像共享，如果有人觉得它方便的话

 $(".tooltipBearing").qtip({
                            content: {  
                                text: $("#tooltipDiv").html()
                            }          
                      });

如果您未能将.html（）放在那里，您将看到共享工具提示显示一次，然后当您从另一个图像激活它时，它将不再适用于第一个图像

工具提示轴承是页面中某些图像上设置的一个类

---

tooltipDiv是包含工具提示内容的div的ID

我就是这么做的。我在一个独特的元素上附加了我的工具提示。然后，需要相同工具提示的所有其他元素将只触发唯一元素的工具提示显示：

$('#unique-element').qtip({
  content: {text: 'My Tooltip'},
});

$('.other-elements').click(function(){
  $('#unique-element').qtip('show');
});

但是，所有工具提示将显示在固定位置。这在我的例子中不是问题，因为我使用工具提示作为模态。您必须通过cutom

事件

方法管理工具提示位置。

基于，我的工作解决方案如下：

$('[data-tooltipid]').each(function() {
    var ttid = $(this).data('tooltipid');
    $(this).qtip({
        content: {
            text: $('#'+ttid).html(),
        },
        position: {
            my: 'top left',
            at: 'bottom left',
            target: $(this)
        }
    }).removeAttr('href').removeAttr('onclick');
});

在我的例子中，包含文本的HTML元素的id取自

数据工具提示

属性；my

href

和

onclick

属性将被删除，因为它们已被工具提示淘汰

$('[data-tooltipid]').each(function() {
    var ttid = $(this).data('tooltipid');
    $(this).qtip({
        content: {
            text: $('#'+ttid).html(),
        },
        position: {
            my: 'top left',
            at: 'bottom left',
            target: $(this)
        }
    }).removeAttr('href').removeAttr('onclick');
});