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

Question

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呢？谢谢！

- Luke Dennis

Answer 1

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

- zombat

Answer 2

不要使用逗号分隔的元素列表，而是使用类选择器。以下是一个示例：

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

我还没有测试过这个，但应该可以正常工作。

- Joe Mills

---

这是不正确的；通过id选择（例如$('#id1,#id2')）比通过class选择要快得多。匹配$('.selectorClass')时，将解析整个页面的DOM树，而匹配IDs时，则需要使用getElementById调用进行两次查找。 - El Yobo

我不同意“El Yobo”的观点，因为这个答案对我来说完美地解决了问题。这个问题与速度无关，而是与哪种方法最容易有关。 - kingchris

选择ID比选择CSS类明显更快。但这个性能问题只与Internet Explorer的版本（直到版本9）有关。从版本9开始，IE浏览器表现几乎与Chrome、Firefox、Opera等其他浏览器一样好，已经多年了。不幸的是，很多大公司仍在使用Internet Explorer 8，这个问题依然存在。我已经不再谈论IE7或IE6了。因此，在现代浏览器中，通过CSS类进行选择非常快速。 - Miklos Krivan

Answer 3

您可以动态构建 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;
});

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

编辑：2011年6月22日（justgrumpy）- 从beta3开始，默认情况下qtip不会预渲染。必须在内容选项中将“prerender”设置为“true”，才能动态显示qtip。

- Sam Doshi

Answer 4

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

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

如果您没有添加.html()，则会出现共享工具提示一次，然后当您从另一张图片激活它时，它将不再适用于第一个... tooltipBearing是页面上某些图像设置的类。 tooltipDiv是包含工具提示内容的div的ID。

- WizardsOfWor