Show same qTip tooltip onclick but only one at a time

I am trying to use qTip2 to show an html content tooltip on click of any link with class "bb". When you click on any link with class 'bb', the tooltip opens the div with class 'tooltiptext' and when you click another link with class 'bb' (or anywhere on the page), the first tooltip closes and the second opens above that link (or just the tooltip closes if you haven't clicked on another link).

I've managed to get the toolip opening and closing but only the second link shows the html content.

Any ideas?

Many thanks!

    <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>

Solution

jQuery next() only takes the immediately following sibling, so for the first link a it gets the second one and when you filter by class .tooltipnext all you get is an empty selection.

Best way is to select directly by the class of the tooltip (or even by id as it should be unique) and get its html content with html()

No need to use the each() function as qtip already applies to all selected elements.

It should look something like this:

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

check fiddle here: https://jsfiddle.net/bafforosso/pr0utrh2/1/