jQuery qTip：如何将单个工具提示 div 附加到多个目标 div？答案

【问题标题】：jQuery qTip: How to attach a single tooltip div to multiple target divs?jQuery qTip：如何将单个工具提示 div 附加到多个目标 div？
【发布时间】：2014-11-14 10:12:59
【问题描述】：

jQuery qTip 插件的正常行为是为每个分配的工具提示项创建一个新的隐藏 div。有没有办法将单个隐藏的工具提示元素绑定到多个目标，以避免 DOM 混乱？

人为的例子：

<div id="foo1"></div>
<div id="foo2"></div>

<script> $("#foo1,#foo2").qTip({"content":"test"}); </script>

<!-- Creates two elements, rather than one: -->
<div class="qtip" style="display:none;">test</div>
<div class="qtip" style="display:none;">test</div>

如果 qTip 无法做到这一点，谁能推荐另一个基于 jQuery 的工具提示插件，它只使用一个工具提示容器就支持富 HTML？谢谢！

【问题讨论】：

标签： jquery tooltip qtip

【解决方案1】：

我是jQuery Tools Tooltip 的粉丝。它允许您在 HTML 中定义自己的工具提示结构，并且可以将该工具提示应用于任意数量的元素。

【讨论】：

【解决方案2】：

您可以动态构建 qTip 框。

HTML：

<a id="some-link" href="#">Show a qTip</a>
<div id="hidden-element" style="display:none"></div>

Javascript：

$('#some-link').click(function() {
    $('#hidden-element').qtip({
        content: {
            text: '<div>Insert content here</div>',
            prerender: true  //as of beta3, this option is false by default
        },
        // etc, etc
    });

    qtip = jQuery('#hidden-element').qtip('api');
    qtip.show();

    return false;
});

有关 qTip API 的详细信息，请参阅 http://craigsworks.com/projects/qtip/docs/api

编辑：2011 年 6 月 22 日（脾气暴躁）-As of beta3 the qtip does not prerender by default。 'prerender' 必须在 content 选项中设置为 'true'，qtip 才能动态显示。

【讨论】：

【解决方案3】：

使用类选择器代替逗号分隔的元素列表。这是一个例子：

$('.selectorClass').qTip({arguments:here});

我没有对此进行测试，但它应该可以正常工作。

【讨论】：

这是不正确的；按 id 选择（例如 $('#id1,#id2')）比按类选择要快得多。为了匹配 $('.selectorClass') 页面的整个 DOM 树被解析，而为了匹配 ID，使用 getElementById 调用进行了两次查找。
我不同意“El Yobo”，因为这个答案非常适合我。这个问题与速度无关。它与最简单的方法有关。
很明显，按ID选择比按css类选择要快得多。但是这个性能问题只与 Internet Explorer 的版本有关，直到版本 9。从版本 9 开始的 IE 浏览器多年来的性能几乎与 Chrome、Firefox、Opera 等一样好。不幸的是，在使用 Internet Explorer 8 的大公司中，问题仍然存在。我已经不是在谈论 IE7 或 IE6。因此，在现代浏览器中，通过 css 类进行选择非常快。

【解决方案4】：

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

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

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

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

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

【讨论】：