logo标签列表

QTip2多元素，相同工具提示

javascriptjqueryhtmlqtipqtip2
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的工具提示。
是否有人知道实现多个元素具有相同工具提示的方法？
5个回答
1

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

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

如果您没有添加.html()，您会看到共享提示仅出现一次，然后当您从另一张图片激活它时，它将不再适用于第一张图片... tooltipBearing是在页面上设置在某些图像上的类。 tooltipDiv是包含您的工具提示内容的div的ID。
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 属性中获取的；我的 href 和 onclick 属性被删除，因为它们已经被工具提示所取代。
0
为了在动态创建的元素中使用qtip，您需要在元素初始化期间包含qtip。
例如：
$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"});
0
这是我的做法。我将我的工具提示附加到一个唯一的元素上。然后，所有需要相同工具提示的其他元素只需触发唯一元素的工具提示显示即可：
$('#unique-element').qtip({
  content: {text: 'My Tooltip'},
});

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

然而，你所有的工具提示都将显示在固定位置。在我的情况下，这不是问题，因为我将工具提示用作模态框。您将需要通过自定义事件方法来管理工具提示位置。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接