Question

我在spring mvc Web项目中实现了此操作，单击帮助图标便出现了bootstrap popover。

另一方面，首先单击图标；弹出窗口将打开并从帮助图标移开。将其关闭后，重新叮当响，即可正确放置弹出窗口。

当我第一次将鼠标悬停更改点击时，弹出窗口几乎无法显示一会儿，弹出窗口脱离了帮助图标，然后正确返回其位置。

如果看这张GIF图片，您会更好地理解。

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

我将JSP与JSTL一起使用。

我将所有代码复制到punker上，没有任何区别，并且可以正常工作！该代码在此插件上。 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。

Answer 2

尝试更改

data-toggle="popover"

到

data-toggle="popover" data-placement="left"

Bootstrap 4 Popover无法正常工作？

2 个答案: