I am experiencing an issue with the bootstrap Popover feature. It seems to work inconsistently - sometimes it works and other times it doesn't. I am using it to create a popover that displays a user's information when a visitor hovers over the user's name. The page is dynamically generated using ajax, so initially I thought the problem might be related to content being loaded after the popover initiation. However, the strange thing is that it only works intermittently.
$(document).on('mouseenter', '.postusername', function(e){
var userid = this.parentElement.parentElement.children[0].innerHTML;
var element = this;
if(userid)
{
$.get('/Requests/getuinfo.php', {id : userid})
.done(function(data){
var uinfo = JSON.parse(data);
$(element).popover({
html : true,
template : '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
content : '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name
+ '</div>',
placement: 'auto'
});
$(element).popover('show');
});
}
});
$(document).on('mouseleave', '.postusername', function(e){
$(this).popover('hide');
});
That's the JavaScript code I have implemented.