Summernote 0.9.1搭配Bootstrap 5.3.6时图片/表格Popover异常求助

使用Summernote 0.9.1搭配Bootstrap 5.3.6时，点击编辑器内图片弹出的操作Popover（菜单）位置异常，显示在编辑器底部而非图片附近。已尝试配置{ dialogsInBody: true }，问题未解决。

错误截图：

复现代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.css" rel="stylesheet"/>
    <link type="text/css" href="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.css" rel="stylesheet"/>
</head>
<body>
    <div id="summernote">
        Hello Bootstrap 5.3.6 and Summernote 0.9.1 and jQuery 3.7.1.<br>
        <b>The popup when you click on image does not show on image</b><br>
        <img src="https://fastly.picsum.photos/id/1025/200/300.jpg?hmac=IOMIDjfOXbZ-vD59diaXLcQcq5g6Xo3Zg_gRF9UmwL0" height=150 alt="Photo">
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.js"></script>
    <script>
    $(function() {
        $('#summernote').summernote();
    }); 
    </script>
</body>
</html>

1. 升级Summernote版本（推荐） #

Summernote 0.9.1发布时间较早，对Bootstrap 5的适配存在缺陷。官方在0.8.20及以上版本中完善了Bootstrap 5的支持，直接替换CDN链接即可解决定位问题：

<!-- 替换Summernote CSS -->
<link type="text/css" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.css" rel="stylesheet"/>
<!-- 替换Summernote JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.js"></script>

2. 自定义CSS修复（不升级时） #

如果无法升级版本，可通过以下CSS强制修正Popover的定位：

.summernote .note-popover {
  position: absolute !important;
  z-index: 1060 !important;
}

将这段代码添加到页面<head>的<style>标签内，覆盖默认的错误定位样式。

3. 调整初始化配置 #

在初始化Summernote时，添加Popover配置并禁用tooltip避免冲突：

$(function() {
    $('#summernote').summernote({
        popover: {
            image: [
                ['custom', ['imageAttributes']],
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']]
            ],
        },
        dialogsInBody: true,
        tooltip: false
    }); 
});

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