PHP Ajax Bootrstrap popover placement issue - php

Question

I am trying to fill my notification popover with AJAX. I have two popovers on the same page. The other popover's content is filled by PHP. The AJAX works fine.
The problem is that the notification popover is being displayed where the other popover is and not below where I am clicking. This problem only occurs when the data content is taken from AJAX. Content produced from PHP or some string works as expected.
Below is the code for the 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>';
}
And this is my HTML element:
<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>

Answer 1

Ok Solved the issue.
Changed the return div with
return '<div id="'+ div_id +'" style="width: 400px; padding-right: 10px">Loading...</div>';
Apparently the fix was adding a style to the div with a specified width and some css changes in template.
Below is the code
$('#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; width: 400px"><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 +'" style="width: 400px; padding-right: 10px">Loading...</div>';
}
PS: I am also using the below css,
.popover{
max-width: 600px !important;
max-height: 500px !important;
}
.popover div{
overflow-x: hidden !important;
}