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

您可以动态构建 qTip 框。

网页：

<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 日（只是脾气暴躁）-从 beta3 开始，qtip 默认情况下不会预渲染。内容选项中的“prerender”必须设置为“true”，qtip 才能动态显示。