带有html内容的qTip2

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'));
             }

         }
     });
 });