7

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?谢谢!

4

4 回答 4

2

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

于 2010-01-04T00:54:19.717 回答
1

不要使用逗号分隔的元素列表,而是使用类选择器。这是一个例子:

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

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

于 2010-01-05T17:40:15.513 回答
1

您可以动态构建 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 日(脾气暴躁)-从 beta3 开始,qtip 默认情况下不会预渲染。'prerender' 必须在 content 选项中设置为 'true',qtip 才能动态显示。

于 2010-01-10T12:17:00.640 回答
1

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

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

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

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

tooltipDiv is the ID of the div containing your tooltip content.

于 2013-08-13T19:46:27.380 回答