javascript - 弹出窗口上的 Bootstrap 3 数据远程内容

Question

我正在尝试为 Bootstrap 3 弹出窗口处理远程内容，但无法显示内容。

我的html:

<a class="btn-link mchat-link hidden-xs rule" href="javascript:void(0)" id="oneData" data-toggle="popover" title="{L__HELP}" data-remote="{T_SUPER_TEMPLATE_PATH}/the_rules.html" title="{L_HELP}" value="{L_HELP}"><i class="icon-moon-question"></i></a>

我的js:

$('#oneData').popover({placement:'top', html:true});

我错过了什么已经尝试了几个小时但没有成功

Answer 1

Bootstrap popover 没有 data-remote 属性，但我们可以像这样使用它来将远程数据加载到 Popover 中:

html

<a href="#" title="{your_title_here}" data-remote="{url_to_remote_php}">link</a>

js

$('*[data-remote]').on('mouseover', function() {
    var el = $(this);

    $.get(el.data('remote'),function(html) {
        el.popover({
            content: html,
            html : true,
            placement: 'right'
        });
        el.popover('show');
   });
});

我需要弹出窗口保持打开状态，直到用户将鼠标悬停在链接或弹出窗口之外，因此我添加了一些魔法来做到这一点

js(具有保持打开功能)

$('*[data-remote]').on('mouseover', function() {
    var el = $(this);

    $.get(el.data('remote'),function(html) {
        el.popover({
            content: html,
            html : true,
            placement: 'right'
        });

        el.popover('show');

        $(".popover").on("mouseleave", function() {
            var el = $(this);
            el.popover('hide');
        });

        el.popover().on("mouseleave", function() {
            var el = $(this);
            setTimeout(function() {
                if (!$(".popover:hover").length) {
                    el.popover("hide")
                }
            }, 300);
        });
    });
});