3

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')");
jShoop
  • 411
  • 1
  • 6
  • 15

1 Answers1

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

Community
  • 1
  • 1
AlbatrossCafe
  • 1,710
  • 6
  • 26
  • 49
  • 1
    Hidden DIVs were the answer to my problem. Although it is very repetitive, CSS is much saver to rely on because it's less heavy. Hidden DIVs and JS handling the logic of displaying them. - My initial attempt was sending inline HTML to the page with JS, even though the HTML was in one place, it was too slow. – jShoop Jul 03 '15 at 12:47