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

Question

我在 spring mvc web 项目中实现了这个，bootstrap 弹出窗口出现在单击帮助图标时。

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

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

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

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

我在 JSTL 中使用 JSP。

我在 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。

Answer 2

尝试改变

data-toggle="popover"

到

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

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

Bootstrap 4 popover not working properly?

javascript

css

spring

jstl

bootstrap-4