显示相同的qTip工具提示onclick但一次只能显示一个

时间:2016-02-25 13:18:08

标签: jquery tooltip qtip

我正在尝试使用qTip2显示一个html内容工具提示,点击任何与类#34; bb"的链接。当您点击任何带有课程' bb'的链接时,工具提示会打开包含课程' tooltiptext'的div。当你点击另一个链接与班级' bb' (或页面上的任何位置),第一个工具提示关闭,第二个工具提示在该链接上方打开(或者如果您没有点击另一个链接,则只关闭工具提示)。

我设法让工具包开启和关闭,但只有第二个链接显示了html内容。

有什么想法吗?

非常感谢!

    <script>
 $(document).ready(function()
 {
     $('a.bb').each(function() {
         $(this).qtip({
         show: 'click',
         hide: 'unfocus',
         content: {
                 text: $(this).next('.tooltiptext')
             }
     });
     });
 });
 </script>

<style type="text/css">
    .tooltiptext{
    display: none;
}

<body>
<a class="bb" href="#test">Click me!</a>
<a class="bb" href="#test">Click me again!</a>

<div class="tooltiptext">
    Complex <b>inline</b> <i>HTML</i> in your <u>config</u>
</div>
<!-- Qtip -->
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css">
<script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
</body>

1 个答案:

答案 0 :(得分:0)

jQuery next()只接受紧随其后的兄弟节点,因此对于第一个链接a,它获得第二个链接,当您按类.tooltipnext进行过滤时,所有获得的都是空选。

最好的方法是直接选择工具提示的类(或者甚至是id,因为它应该是唯一的)并使用html()获取其html内容

无需使用each()功能,因为qtip已经适用于所有选定元素。

看起来应该是这样的:

$(document).ready(function() {
    $('a.bb').qtip({
        show: 'click',
        hide: 'unfocus',
        content: {
            text: $('.tooltiptext').html()
        }
    });
});

在这里查看小提琴:https://jsfiddle.net/bafforosso/pr0utrh2/1/