Bootstrap Popover 不会显示：错误请在可见元素上使用 show答案

【问题标题】：Bootstrap Popover won't show: Error please use show on visible elementsBootstrap Popover 不会显示：错误请在可见元素上使用 show
【发布时间】：2019-11-16 06:11:42
【问题描述】：

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

错误：请在可见元素上使用 show
显示、_enter、toggle、_setListeners、dispatch、handle

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

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

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

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

【问题讨论】：

您能提供更多示例代码吗？ HTML/CSS？这很难说，但听起来这可能是基于浏览器的样式的问题。
@zfrisch 是的，添加了上下文！
我在这里看到的错误告诉我没有添加popperjs。如果您还没有，您可以使用 CDN 添加它。也许显示您的 HTML 的 codepen 会有所帮助

标签： javascript jquery twitter-bootstrap firefox dom

【解决方案1】：

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

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

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

&lt;span data-toggle="tooltip" data-placement="right" title="my tootltip content"&gt;help&lt;/span&gt;

【讨论】：