Summernote 0.9.1 with Bootstrap 5.3.6 Popover on image and tables is not working

Here is the image of error: Popover show up below the editor Image The popover on the image (menu) is not showing correctly on this page. I have tried servral options including { dialogsInBody: true }, but none seem to work.

<!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>

Solution

That the image poppup shows in the middle of an image is not anymore since bootstrap version 5.2.

Solution 1

The first solution would be to downgrade to the latest version that has the the popup inside the image. That vesion would be 5.1.3 example:

    <link type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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"/>
<body>
    <div id="summernote">
        Hello Bootstrap 5.1.3 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.1.3/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>

Solution 2

Since the only thing preventing the popover from displaying over the image is that it is static instead of absolute is it an easy fix using bootstrap/jquery. What i did is the following i added an absolute class to the note container and to the arrow of the note container example is shown below:

    <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"/>
<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();
      $('.note-popover').addClass('position-absolute');
      $('.popover-arrow').addClass('position-absolute');
    }); 
    </script>
</body>