Why does this qtip2 show blank content on 2nd click?

Question

I have a qtip2 tooltip which is loading static HTML content from the next element. The tooltip successfully loads the content on the first hover. On the second hover the tooltip's content panel is blank.

http://jsfiddle.net/adamtsiopani/m4hohp4e/

HTML

<a href="#" class="tooltip" title="My Title">hover here</a>
<div class="tooltip-content">
    <!-- some content -->
</div>

CSS

.tooltip-content {
    display: none;
}

JavaScript

$('a.tooltip').qtip({
    content: {
        title: {
            text: function(event, api) {
                return $(api.target).attr('title');
            }
        },
        text: function(event, api) {
            return $(api.target).next('.tooltip-content');
        }
    }
});

http://jsfiddle.net/adamtsiopani/m4hohp4e/

UPDATE

I understand now why this is happening - on the first hover, the .tooltip-content element gets moved into the tooltip which is then placed at end of the DOM. So it's no longer the 'next' element... but I don't understand how to fix this?

Answer 1

Rather than passing the actual .tooltip-content DOM node/jQuery element to qtip for the popup's text:

text: function(event, api) {
    return $(api.target).next('.tooltip-content');
}

You can pass it html instead:

text: function(event, api) {
    return $(api.target).next('.tooltip-content').html();
}

Fiddle