After creating a website on SharePoint using Bootstrap and populating the content with JavaScript, I encountered an issue with popover functionality. Oddly enough, the popover only works after refreshing or reloading the page with F5.
Strangely, popovers outside of the table function properly upon initial load, and the code functions without errors on my local machine. However, when transferred to SharePoint, it malfunctions.
Here is the initialization code:
<script src="jquery-3.5.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
Followed by the table generation function call:
<body onload="javascript: GenerateTable();">
And then the popper function call:
$(function () {
$('.example-popover').popover({
})
})
The outcome is a table with a line containing the following popper:
<td>Here is a question which needs a popper as info!
<div class="row justify-content-end">
<a href="#!" tabindex="0" class="badge badge-info" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="This is a funny popover" title="Info">Info</a>
</div>
</td>
It appears to be an issue related to loading order, but why it works locally and not on SharePoint remains unclear.