Displaying HTML partial inside JQuery qtip2 popup

Question

I have a very large complicated informative popup to display to multiple cells within the same column.

My initial attempt was to build an html page and display that within the 'content' option within qtip2's jquery. All I could find was inline HTML as an option for straight HTML. The CSS additionally needs to modified in the original qtip2 download because it does not allow options in jquery beyond certain dimensions.

My jquery:

function initAbbonamentiTable(){

var content = $('<div class="popup">' +
'<div class="title">' ); //etc really long inline HTML

$('.price-column').each(function(){

    $(this).qtip({
        content : content, //here is where i'd like to reference a partial instead

        show: 'click',

        position: {
            my: 'top center',  // Position my top left...
            at: 'bottom center', // at the bottom right of...
            target: $(this) // my target
        },
        style: {
            classes: 'custom'
        }

    });
});

The most import line is to get this one correct, another try:

 content: ("@@import('../components/some/file_location.html')");

Answer 1

I have never tried it myself, but I think you can do it by using AJAX to get the HTML.partial page, store that into your jQuery variable content, and display it that way. Refer to this answer about returning AJAX into a jQuery variable: How do I return the response from an asynchronous call?

OR, to go along with your first attempt, could you write out the HTML that you need to display into a <div> somewhere on your page, set its style="visibility: hidden" use jQuery to get that html and then render it out?

I made a demo here: http://jsfiddle.net/o1hx267w/1/

It seems to work, but the only problem is that CSS within the tooltip is gonna be a b*tch