我在使用Bootstrap 4.6 进行popover可视化时遇到问题
在这个最小的例子中：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</head>
<body style="background-color: cadetblue; height:1000px">
<header style="height: 100px">
</header>
<section style="overflow-y: auto; height: 500px; background-color: cornsilk;">
<div style="height: 1000px" > </div>
<div id="test">
<button type="button"
data-placement="top"
data-toggle="popover"
title="Blah"
data-content="Bleh Bleh">Blih</button>
</div>
<script>
$("button").popover({})
</script>
<div style="height: 1000px" > </div>
</section>
</body>
</html>当滚动条中的按钮可见时，弹出窗口将正确显示：
Popover显示正常
但是如果我滚动并按下按钮"；通过"；"；学员蓝"；区域弹出，而不是保持滚动并最终停止可见停留在顶部/底部边界：
Popover停留在"；上限"；当向下滚动部分时
Popover停留在"；下限"；向上滚动时
正如一些类似问题的答案所建议的那样，我尝试过摆弄container、boundary和fallbackPlacement选项，但都无济于事。根据我在这个网站和其他网站上的调查，Bootstrap 4.6中的popover可视化是一个棘手的问题，但由于这是一个如此简单的问题，我确信我忽略了一些东西。
我终于找到了一个解决方案，使用了本期中的评论。
显然，Popper(Bootstrap用来显示Popover的库(切换属性"；边界中的x"；每当触发popover的元素退出其边界时，在popover上。
因此，解决方案是添加一个类似于的css规则
.popover[x-out-of-boundaries]{
display: none;
}
以在元素停止可见时隐藏popover。