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

Question

我正在尝试使用 qTip2 在单击 class "bb" 的任何 link 时显示 html 内容工具提示。当您单击带有 class 'bb' 的任何 link 时，工具提示会打开带有 class 'tooltiptext' 的 div，当您单击另一个 link 与 class 'bb' （或页面上的任何位置），第一个工具提示关闭，第二个在 link 上方打开（或者如果您没有单击另一个工具提示，则仅关闭工具提示link).

我已经设法打开和关闭工具栏，但只有第二个 link 显示 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>

Answer 1

jQuery next() 只接受紧随其后的兄弟姐妹，所以对于第一个 link a 它得到第二个，当你过滤 class .tooltipnext你得到的只是一个空的select离子。

最好的方法是直接通过工具提示的 class select（或者甚至通过 id，因为它应该是唯一的）并通过 [=14= 获取其 html 内容]

无需使用 each() 函数，因为 qtip 已经应用于所有 selected 元素。

它应该看起来像这样：

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

在此处检查 fiddle：https://jsfiddle.net/bafforosso/pr0utrh2/1/

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

Show same qTip tooltip onclick but only one at a time

jquery

tooltip

qtip