Bootstrap Tooltip初始化后仍无法正常显示问题求助

你的代码里有两个关键问题导致Tooltip不生效：

• 初始化脚本执行时机过早：你把Tooltip的初始化代码写在了按钮元素之前，此时浏览器还没解析到这些按钮，document.querySelectorAll('[data-bs-toggle="tooltip"]')找不到任何元素，自然无法完成初始化。
• 初始化脚本在Bootstrap JS之前加载：你的初始化代码调用了bootstrap.Tooltip，但此时Bootstrap的JS文件还没加载，bootstrap对象不存在，会直接报错。

修正后的完整代码 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
        Tooltip on top
      </button>
      <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
        Tooltip on right
      </button>
      <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
        Tooltip on bottom
      </button>
      <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
        Tooltip on left
      </button>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <!-- 将初始化脚本放在Bootstrap JS之后、所有DOM元素之后 -->
    <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
    </script>
  </body>
</html>

关键修正点 #

1. 把Tooltip初始化脚本移到Bootstrap JS文件之后，确保bootstrap对象已经加载完成。
2. 把初始化脚本移到所有按钮元素之后，确保DOM已经解析完成，能正确获取到需要初始化的元素。

另外，你注释掉的jQuery写法是Bootstrap 3/4的语法，Bootstrap 5已经不再依赖jQuery，所以用原生JS的初始化方式是正确的。

内容的提问来源于stack exchange，提问作者Swagat Adhikary