5

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

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

截至目前，我有这个：

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

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

就我所拥有的，它目前正确地创建了第一个工具提示，但是如果我添加一个新元素并重新分配工具提示，它会为新元素创建一个具有不同 id 的全新工具提示。

有谁知道一些完成多个元素的方法，相同的工具提示方法？

4

5 回答 5

1

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

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

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

tooltipBearing是设置在页面中某些图像上的类。

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

于 2013-08-13T20:10:15.127 回答
0

为了qtip在动态创建的元素中使用，您需要qtip在元素初始化期间包含。

例如

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"});
于 2012-04-26T08:07:56.157 回答
0

可悲的是，看起来我们需要为每个悬停/单击元素克隆 Tooltip 元素。

Craig 在 GitHub 问题中提到了这一点：https ://github.com/Craga89/qTip2/issues/173

于 2013-05-22T15:08:51.217 回答
0

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

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

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

但是，您的所有工具提示都将显示在固定位置。在我的情况下这不是问题，因为我使用工具提示作为模式。您将不得不通过自定义event方法管理工具提示位置。

于 2014-02-27T18:51:57.313 回答
0

根据user738048 的回答，我的工作解决方案是这样的：

$('[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 取自data-tooltipid属性；myhref和onclick属性已被删除，因为它们已被工具提示废弃。

于 2015-05-07T08:13:25.470 回答