当页面滚动时，Bootstrap 5 工具提示放置最常见的问题
Iva*_*ets 3 html javascript css twitter-bootstrap
当强制放置顶部时，我在引导程序中遇到工具提示问题。我现在使用的是最新版本：5.1.3
我尝试创建一个代码片段，但该问题在 codepen 上无法重现，因此我将在此处粘贴代码和视频示例。
function initTooltips() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.forEach(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
}
initTooltips();.section {
padding-top: 500px;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.js"></script>
<div class="section">
<div class="row">
<div class="col-12 text-center mt-5 pt-5">
<button type="button" class="btn btn-secondary" id="test-btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip with button">
Tooltip on top
</button>
</div>
</div>
</div>当我向下滚动页面查看该按钮并将鼠标悬停在其上时，工具提示会出现在顶部，其间隙等于滚动位置。
我尝试使用“边界”和“容器”等工具提示选项，但它没有多大帮助。
您对如何修复它有什么想法吗？
我的问题与我在主应用程序模板中犯的错误有关。
我忘记放置：
<!DOCTYPE HTML>
在 HTML 页面的顶部。这个简单的错误导致了这个问题。修复很简单，但需要几天的调试！希望这个答案对某人有用。