jQuery qTip：如何将单个工具提示div附加到多个目标div？ [英] jQuery qTip: How to attach a single tooltip div to multiple target divs?

问题描述

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

The normal behavior for the jQuery qTip plugin is to create a new hidden div for every tooltip item assigned. Is there a way to tie a single hidden tooltip element to multiple targets, to avoid cluttering the 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无法做到这一点，任何人都可以推荐另一个支持丰富HTML的基于jQuery的工具提示插件只使用一个工具提示容器？谢谢！

If qTip is unable to do this, can anyone recommend another jQuery-based tooltip plugin which supports rich HTML using only a single tooltip container? Thanks!

推荐答案

您可以动态构建qTip框。

You can construct qTip boxes dynamically.

Html ：

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

Javascript：

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的详细信息

See http://craigsworks.com/projects/qtip/docs/api for details on the qTip API

编辑： 2011年6月22日（justgrumpy） - 截至beta3，qtip默认情况下不会预呈现。内容选项中的'prerender'必须设置为'true'才能动态显示qtip。

June 22, 2011 (justgrumpy) - As of beta3 the qtip does not prerender by default. 'prerender' must be set to 'true' in the content option for the qtip to display dynamically.

这篇关于jQuery qTip：如何将单个工具提示div附加到多个目标div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！