Ajax加载数据后如何正确调整Bootstrap Popover的显示位置

已有大量文章讨论将Ajax请求数据加载到Bootstrap 4.0 popover中，本文问题有所不同：我的popover在加载后位置异常，本该显示在便签图标上方，却出现在下方并超出屏幕（内部应有7条内容）。原因是popover初始作为容器显示时，内部数据/HTML尚未加载，数据加载完成后popover未自动调整位置，滚动页面可刷新其位置。

相关代码如下：

<script>
    $(function () {
        $('[data-toggle="popover"]').on('inserted.bs.popover', function (evt) {
            getViewNoteModal($(evt.target));
        });
    });
    function getViewNoteModal(caller) {
        var $caller = $(caller);
        var $noteContainer = $('#editNotes');
        // The $caller is used to retrieve parameters.
        ...
        $.ajax({
            // GetNoteViewer is a C# method that returns the view that goes into #editNotes.
            url: "@Url.Action("GetNoteViewer")",
            method: "GET",
            data: {
                // parameters...
            },
            success: function (data) {
                $noteContainer.html(data);
            }
        });
    }
</script>
...
<i class="fas fa-2x fa-sticky-note text-info show-dialog" data-placement="top"
    data-toggle="popover" data-html="true" data-trigger="click" 
    data-template='<div class=" popover card-primary" role="tooltip">
        <div class="arrow"></div>
        <h3 class="popover-header card-header"></h3>
        <div class="popover-body"></div>
    </div>'
   data-content="<div id='editNotes'>">
</i>

尝试过的解决方案：

• 在Ajax成功回调中手动调用dispose再show popover，但dispose会清除内部已加载的数据，直接调用show则会触发popover回调无限循环。

目前popover内部功能和格式均正常，仅需解决首次显示时位置正确的问题。

内容的提问来源于stack exchange，提问作者Freerey