I am having issues with a Bootstrap popover that does not open. It is not the only popover in the page and others work fine, so it's no issue with missing libraries.
Using Firefox & IE 11.
EDIT After Solving: Solution was as in the answer below, because data-content was empty. While the documentation of the current Version (3) does not mention this behaviour in any way, Bootstrap 4 alpha Doc says: Zero-length title and content values will never show a popover. This clearly applies to the current version as well.
Please find below my HTML & Javascript code.
In short what I'm doing: initialize Popover and on open populate popover with content in a div (divid is passed as data attribute).
When debugging through the code I can see the popover gets initialized and everything, but when clicking on the link nothing happens.
Unfortunately there are no errors showing up. could someone please lend me their eyes? I've been too long staring at it and can't see no errors...
HTML:
<a data-toggle="popover" data-infotype="scheduledlines" data-divid="${posItemStatus.index}" data-placement="bottom" data-title="" data-trigger="click">
<span class="fa fa-info-circle" aria-hidden="true"></span>
<span class="sr-only">Show info</span>
</a>
Javascript (initialize):
$(document).ajaxSuccess(function(){
var init = function(){
$('[data-toggle="popover"]').each(function(index) {
$(this).popover({
html: true
});
$(this).on('show.bs.popover', onLoadPopoverFunction);
$(this).on('remove', function(){
$(this).popover('hide');
});
});
}
window.setTimeout(init,100);
});
Javascript - Function that gets called on popover open:
var onLoadPopoverFunction = function(event){
var element = $(event.target);
var infoType = $(element).data('infotype');
[...]
if(infoType === "scheduledlines"){
var id = $(element).data('divid');
$(element).data('bs.popover').options.content = $('#ScheduledLines_'+id).html();
}
}