Отображение частичного кода HTML внутри JQuery qtip2 popup

Question

У меня очень сложное информативное всплывающее окно для отображения нескольких ячеек внутри одного столбца.

Моя первоначальная попытка заключалась в том, чтобы создать html-страницу и отобразить ее внутри опции «content» в jQery qtip2. Все, что я мог найти, это встроенный HTML в качестве опции для прямого HTML. Кроме того, CSS необходимо изменить в исходной загрузке qtip2, поскольку она не позволяет использовать параметры jquery за пределами определенных размеров.

Мой 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' 
     } 

    }); 
}); 

Наиболее импорт линия, чтобы получить это один правильный, еще одну попытку:

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

Answer 1

Я никогда не пробовал сам, но я думаю, что вы можете сделать это используя AJAX, чтобы получить страницу HTML.partial, сохраните ее в переменной jQuery content и покажите ее таким образом. Обратитесь к этому ответу о возвращении AJAX в переменную JQuery: How do I return the response from an asynchronous call?

ИЛИ, чтобы идти вместе с первой попытки, не могли бы вы выписывать HTML, который нужно отобразить в <div> где-нибудь на странице, установите его style="visibility: hidden" использовать jQuery, чтобы получить этот html, а затем визуализировать его?

Я сделал демо здесь: http://jsfiddle.net/o1hx267w/1/

Это похоже на работу, но единственная проблема в том, что CSS в подсказке собирается быть B * TCH