Displaying partial HTML inside JQuery qtip2 popup
I have a very complex informative popup to display multiple cells within a single column.
My initial attempt was to create an html page and display it inside the "content" option in qtip2 jquery. All I could find was inline HTML as an option for straight HTML. Also, the CSS needs to be changed in the original qtip2 load as it does not allow jquery options outside of certain sizes.
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'
}
});
});
Most important import line is correct, another try:
content: ("@@import('../components/some/file_location.html')");
source to share
I've never tried it myself, but I think you can do it using AJAX to get the HTML.partial page, store it in a jQuery variable content
and show it that way. Check out this answer about returning AJAX to a jQuery variable: How to return a response from an asynchronous call?
OR , to go along with your first try, could you write out the HTML you need to display in <div>
somewhere on your page, set it up style="visibility: hidden"
using jQuery to get that html and then render it?
I made a demo here: http://jsfiddle.net/o1hx267w/1/
This seems to work, but the only problem is that the CSS inside the tooltip will be b * tch
source to share