PHP Ajax引导陷阱popover放置问题

我正在尝试用AJAX填充我的通知弹出窗口。我在同一页上有两个爆米花。另一个popover的内容由PHP填充。AJAX工作得很好

问题是通知弹出框显示在另一个弹出框所在的位置，而不是我单击的位置下方。只有从AJAX获取数据内容时，才会出现此问题。由PHP或某些字符串生成的内容按预期工作

下面是AJAX popover的代码：

$(document).ready(function() {
    $('#npop').popover({
    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content" style="padding:0px;overflow-y:auto;max-height:450px;"><p></p></div></div></div>',
    html: true,
    placement: 'bottom',
    title: 'Notifications',
    content: function(){
       var div_id =  "tmp-id-" + $.now();
       return details_in_popup(div_id);
    }
  });
});
function details_in_popup(div_id){
    $.ajax({
        url: "<?php echo base_url('pull_notify'); ?>",
        success: function(response){
           $('#'+div_id).html(response);
        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

$（文档）.ready（函数（）{
$（'npop'）.popover({
模板：“
”，
是的，
位置：'底部'，
标题：“通知”，
内容：函数（）{
var div_id=“tmp id-”+$.now（）；
返回弹出窗口中的详细信息（div\u id）；
}
});
});
弹出窗口中的函数详细信息（div\u id）{
$.ajax({
url:“”，
成功：功能（响应）{
$（'#'+div_id）.html（响应）；
}
});
返回“正在加载…”；
}

这是我的HTML元素：

<div class="notification-icon navbar-brand">
    <span>
        <a style="color: #008ae6;font-size:25px;" id="npop" class="glyphicon glyphicon-bell" role="button" data-toggle="popover" ></a></span>
    <span id="bad" class="badge badge-notify"></span>
</div>

确定解决了问题。 将返回div更改为

return '<div id="'+ div_id +'" style="width: 400px; padding-right: 10px">Loading...</div>';

好了，问题解决了。 将返回div更改为

return '<div id="'+ div_id +'" style="width: 400px; padding-right: 10px">Loading...</div>';

.popover{
     max-width: 600px !important;
     max-height: 500px !important;

   }
   .popover div{
    overflow-x: hidden !important;
   }