qTip2 with html content

javascript jquery qtip2

boz · Oct 18, 2012 · Viewed 7k times · Source

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

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

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