Question

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

我设法让工具包开启和关闭，但只有第二个链接显示了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()只接受紧随其后的兄弟节点，因此对于第一个链接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/

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

1 个答案: