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

Answer 1

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

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

请参阅http://craigsworks.com/projects/qtip/docs/api 有关 qTip API

编辑的详细信息：2011 年 6 月 22 日（只是脾气暴躁）- As beta3 中的 qtip 默认情况下不会预渲染。内容选项中的“prerender”必须设置为“true”，qtip 才能动态显示。

Answer 3

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

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

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

Answer 4

我已经弄清楚如何让一个工具提示 div 被许多工具提示图像共享（如果有人觉得它很方便的话）

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

如果您未能将 .html() 放在那里，您将看到共享的工具提示显示一旦，然后当您从另一个图像激活它时，它将不再对第一个图像起作用...

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

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