Question

我试图为bootstrap 3 popover工作远程内容，但我无法显示内容。

我的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');
   });
});

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

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);
        });
    });
});

popover上的bootstrap 3数据远程内容

1 个答案: