javascript - Bootstrap 4 弹出窗口无法正常工作？

Question

我在 spring mvc web 元素中实现了这个，bootstrap popover 在点击帮助图标时出现。

另一方面，第一次点击图标；弹出框打开并远离帮助图标。关闭它后，重新叮当响，它会正确放置弹出窗口。

当我通过悬停更改点击时，在第一次传递时，弹出窗口出现了一会儿几乎无法捕获，弹出窗口远离帮助图标，然后它正确地返回到它的位置。

如果你看看这个 GIF 图片，你会更好地理解。

https://www.afnay.com/images/GIF.gif

我将 JSP 与 JSTL 结合使用。

我在 plunker 上复制了所有代码，没有任何区别，而且它有效!代码在这个plunker上。 https://next.plnkr.co/edit/bcVtCYCpXgScBKcD

不同之处在于我使用 tomcat 9 和 JSP 而不是 HTML。

image

Answer 1

问题来自弹出窗口中的图片，当我更改为使用带有隐藏内容的弹出窗口内容时，它工作正常

                <div id="popover-content-logout" style="display:none">
                   <img class="img-responsive" src="/ressources/images/image-goes- here.jpg" style="max-height:250px;" /> 
                </div>
                // popover declaration ...
                      content: function() {
                        var id = $(this).attr('id')
                        return $('#popover-content-logout').html();
                      },

我认为 tomcat 加载图像需要时间，因为我知道在本地我不在图像上使用 base 64。