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

时间:2015-06-26 09:13:12

标签: jquery html css popup qtip2

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

我最初的尝试是构建一个html页面并在qtip2的jquery中的'content'选项中显示。我所能找到的只是内联HTML作为直接HTML的选项。另外需要在原始的qtip2下载中修改CSS,因为它不允许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')");

1 个答案:

答案 0 :(得分:1)

我自己从未尝试过,但我认为你可以通过使用AJAX来获取HTML.partial页面,将其存储到jQuery变量content中,然后以这种方式显示它。请参阅有关将AJAX返回到jQuery变量的答案:How do I return the response from an asynchronous call?

OR ,与您的第一次尝试同时进行,您是否可以在页面的某个位置写出需要显示的<div>的HTML,并设置其style="visibility: hidden"使用jQuery获取该HTML然后将其渲染出来?

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

它似乎有效,但唯一的问题是工具提示中的CSS将是b * tch