JQuery plugin qTip2 - Click-to-show only works on the first element the first time

Question

I have a page that has some DIVs on it. I want to show a qTip2 whenever a DIV is clicked. Because of some other stuff I'm doing with the qTip I'd like to reuse the same one over and over if possible.

So, I used the qTip2 demo as a starting point and as far as I can tell I have duplicated it exactly. Here's the problem though: It only shows the qtip on the first element that's clicked - the first time. It will show on all other elements as many times as you want to click them, but the first one only the first time.

Has anyone run in to this and have a remedy?

Here's the code for a sample app I created that exhibits the problem:

CSS:

#Container { border: 1px solid black; }
#Container > DIV { float: left; border: 2px outset silver; margin: 5px; }
#Container > DIV:nth-last-child(1) { float: none; border: none; height: 1px; overflow: hidden; margin: -1px 0 0 0;}

JavaScript:

var Container;
var ContainerEndItem;
$(document).ready(function () {
Container = $('#Container');
if(Container.length == 0){
    alert("Container not found!");
    return;
}

var addLinks = $('.TipTarget');
$('<div>Test</div>').qtip({
            content : 'Test',
            position: {
                target: 'mouse', // Use the triggering element as the positioning target
                adjust: { mouse: false, method: 'flip' },
                my: 'left center',
                at: 'right center',
                effect: true    // Enable default 'slide' positioning animation
            },
            show: {
                target: addLinks,
                event: 'click',
                delay: 0
            },
            hide: {
                event: 'none'
            },
            events: {
                show: function (event, api) {
                    // Update the content of the tooltip on each show
                    var target = $(event.originalEvent.target);

                    if(target.length) {
                        api.set('content.text', 'Looking at: ' + target.text());
                    }
                }
            }
        });
});

HTML:

<div id="Container">
  <div id="Apples" class="TipTarget">Apples</div>
  <div id="Watermelons" class="TipTarget">Watermelons</div>
  <div id="Peaches" class="TipTarget">Peaches</div>
  <div id="Meat" class="TipTarget">Meat</div>
  <div id="Clear" style="clear: both">&nbsp;</div>
</div>

JQuery: 1.8.3

qTip2: 2.0.1

Here's a jsFiddle with this exact setup: http://jsfiddle.net/Dracorat/Z3WqC/

Note that if you start by clicking Apple, then Watermelon, then Peaches, then Apples, then Watermelon, then Peaches, and keep repeating, that Apple will show the tip the first time only. The others will show it until the cows come home.

Note then that if you refresh and start with Watermelon, it will only show the first time, but all the rest will show each time.

What have I done wrong?

(And I have already tried using the "each" construct - it didn't change the behavior at all)

Thanks!

Answer 1

Just something I found when editing your code. If you change your code to this:

adjust: { mouse: true, method: 'flip' },

The tool tip works fine.