在 JQuery qtip2 弹出窗口中显示 HTML 部分

Question

我有一个非常大的复杂信息弹出窗口，要显示给同一列中的多个单元格。

我最初的尝试 是构建一个 html 页面并在 qtip2 jquery 的 'content' 选项中显示该页面。我所能找到的只是内联 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?

OR，为了配合你的第一次尝试，你能不能把你需要显示的 HTML 写到你的 <div> 上页面，设置它的 style="visibility: hidden" 使用 jQuery 得到那个 html 然后渲染出来？

我在这里做了一个演示：http://jsfiddle.net/o1hx267w/1/

似乎可行，但唯一的问题是工具提示中的 CSS 将是 b*tch

在 JQuery qtip2 弹出窗口中显示 HTML 部分

Displaying HTML partial inside JQuery qtip2 popup

html

css

jquery

popup

qtip2