Bootstrap 5 页面有滚动条时工具提示位置最重要的问题

Question

当强制放置顶部时，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>

当我稍微向下滚动页面以查看按钮并将鼠标悬停在它上面时，工具提示出现在顶部，间隙等于滚动位置。

我尝试使用“边界”和“容器”等工具提示选项，但没有太大帮助。

你有什么解决办法吗？

Answer 1

我的问题与我在主应用程序模板中犯的错误有关。

我忘了放：

<!DOCTYPE HTML>

在 HTML 页面的顶部。这个简单的错误导致了这个问题。修复很简单，但调试了几天！希望这个答案对某些人有用。

Bootstrap 5 页面有滚动条时工具提示位置最重要的问题

Bootstrap 5 tooltip placement top issue when page has a scroll

html

javascript

css

twitter-bootstrap