qTip2 with html content

Question

I'm having some trouble getting popups with html content to work using qTip2. The popup that is displayed is blank and I'm not sure why.

Here is my javascript:

$('.tooltip').qtip({
    content: {
        text: function(api){
            $(this).next('.tooltip-content');
        }
    }
});​

And my html is:

<a class="tooltip"></a>
<div class="tooltip-content"><strong>this is some tooltip</strong> content. <em>italic</em></div>​

I have set up a jsfiddle showing my problem - http://jsfiddle.net/tajsy/

I plan to have lots of these tooltips on one page so I would like to pair up the link and the hidden div with the content for it.

Can someone tell me where I'm going wrong?

Answer 1

Since you are using a function, you need to return the element:

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

Answer 2

qtip2 Inline HTML http://jsfiddle.net/uaR3m/20/

 $('a').each(function() {
     $(this).qtip({
         content: {
             text: function(api){
             return $($(this).attr('href'));
             }

         }
     });
 });