Question

我的页面上有许多按钮，单击时应显示Bootstrap Popover中的内容。内容是从我的数据库加载的，可以是文本或图像，大小可以不同。我已经实现了一个在IE中正常工作的解决方案，但是在Chrome和Firefox中，当你第一次点击时我的popover正在打开页面的一半按钮。在第二次单击相同的按钮时，图像将出现在正确的位置，没有问题就像在IE中一样。如果弹出窗口的内容是文本，则在所有浏览器中首次显示正确，但Chrome和Firefox中的图像会出现问题。我已经研究了这个，但我找不到任何有助于它在所有浏览器中工作的东西。任何帮助都会很棒。

HTML

<button type="button" class="btn btn-default btn-xs" data-toggle="popover" data-container="body" data-content="@item.Content">@item.Title</button>

JS

$(document).ready(function () {
            $('[data-toggle="popover"]').popover({
                html: "true",
                placement: "top",
            });  
    });

CSS

popover{
width:auto!important;
max-width: none;
}

Answer 1

这是一个有效的答案（由我测试），在这里找到：https://topiqs.online/7280 （点击链接获取完整的图片文章，在链接上搜索“问题：为什么我的弹出框位置错误”以找到好的部分）

问题：为什么我的弹出框在初始悬停时位置错误

我知道有 2 种情况会导致 popover 问题的错误位置：

Popover 包含没有大小属性的图像。
弹出内容是动态加载的。

Popover 开始位置错误，因为图像未加载 弹出框第一次加载图像（没有明确设置宽度和高度）时，可以在加载图像之前创建和定位弹出框。然后最终加载图像，popover 将动态改变它的大小而不是它的位置 - 所以如果 popover 放置在“左”或“顶”，popover 将扩展到触发元素上。

[图像] [图像]

但是，第二次创建弹出框时，图像通常已被浏览器缓存，因此将正确计算弹出框大小，进而正确计算弹出框位置 - 图像问题通常仅发生第一次显示弹出框。

Popover 图片问题可以通过 3 种方式解决：

将弹出框放在“右侧”或“底部”
在图片上显式设置宽度和高度
在图像上单独设置正确的宽度和高度
或者使用 CSS 设置弹出框内所有图像的宽度和高度，例如。 .popover img { 宽度：160px；高度：160px； }
在加载图像时重新定位弹出框
奖励解决方案：有时您不知道弹出窗口中是否有图像（除非您搜索 html 以在弹出窗口内加载）制作可能有图像的弹出窗口

请查看链接以阅读奖励解决方案，并获得带有图片的完整文章。

Answer 2

对于任何可能遇到同样问题的人，我发现添加了行 - 触发器：'hover'，脚本允许将图像加载到每个浏览器的正确位置。

Answer 3

我认为问题（至少对我来说是这样）是缓存之一。单击该按钮，弹出窗口加载其内容，将<img />标签添加到DOM并开始提取，弹出窗口呈现，并且提取完成并被屏蔽在屏幕上。

我发现的最佳解决方案是预加载/图像。有两种方法可以执行此操作。如果您提前知道图像网址，则可以添加preload link。另外，您可以将包含图像标签的弹出式窗口内容放在<div class="d-none">...</div>中（如果使用的是引导程序3，则可以放置在class="hidden"中）。

<html>
<head>
    <!-- case where image urls are known ahead of time -->
    <link rel="preload" as="image" href="my-image.png" />
</head>
<body>
    <!-- 
        case where image urls are NOT known ahead of time
        NOTE: @item.Content should not include <script> tags or the code will be run twice
    -->
    <div class="d-none">
        @item.Content
    </div>

    <button type="button" class="btn btn-default btn-xs" data-toggle="popover"
            data-container="body" data-content="@item.Content">
        @item.Title
    </button>

    <script>
        $(document).ready(() =>
            $('[data-toggle="popover"]').popover({
                html: "true",
                placement: "top",
            });
        });
    </script>
</body>
</html>

Bootstrap Popover - 图像出现在错误的位置，直到第二次点击

3 个答案: