javascript - Bootstrap Popover 不会显示 : Error please use show on visible elements

Question

我创建了一个弹出框，当您单击具有相应 data-toggle 的指定区域时会启动它。 ，它在 Chrome 中运行良好，但在 Firefox 中我不断收到错误消息:

Error: Please use show on visible elements
show, _enter, toggle, _setListeners, dispatch, handle

错误位于 bootstrap.min.js我的项目中使用的文件。

现在我知道这可能与添加 ('show') 有关。在 .popover 之后部分，但我无法让它工作。我的弹出功能:

 // popover initialization - on click
        $('[data-toggle="zero-1"]').popover({
          html: true,
          trigger: 'click',
          placement: 'bottom',

          // main function when popover fires
          content: function engine() {
           
            // execute the actions of the lawmaker() first, then the ruler()
            return lawmaker(this,this,this) + ruler((($(this).data('xray'))),(($(this).data('yray'))));

            // insert image and close button in popover
            function lawmaker(i1,a1, b1,) {

               // get the data-image str value
               var mig = $(i1).data('img');
               // console.log(mig);

               // return the visuals and close button for the popover
               return '<img src="' + mig + '" /> <button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$(\'.popover\').remove();">Close please!</button>'; 
         }
          }
        });

    
.popover {
    position: absolute;
    transform: translate3d(258px, 63px, 0px);
    top: 0px;
    left: 0px;
    will-change: transform;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<map>
<area class="grz" data-toggle="zero-1" data-xray="105" data-yray="70" shape="rect" coords="80,60,130,80" href="javascript://" data-img="img/zero/zero-2.png" title="Zero">
</map>

解决这个问题有什么想法吗？ :)

Answer 1

当我尝试通过javascript初始化工具提示时，工具提示不起作用，但没有错误。当我使用 $(element).tooltip().tooltip('show') 时，我遇到了与您在问题中引用的相同的错误.

这是发生这种情况的可能原因的链接https://github.com/twbs/bootstrap/issues/24918 .

我最终只是将 html 属性放在工具提示元素上以使其正常工作

<span data-toggle="tooltip" data-placement="right" title="my tootltip content">help</span>