Bootstrap Popover与Tooltip无法正常工作，请求技术帮助

你的代码存在三个关键问题，导致Popover和Tooltip无法正常运行：

• jQuery加载顺序错误：<head>里的初始化脚本用到了$，但jQuery是在<body>末尾才引入的，执行初始化时$还未定义，直接导致初始化失败。
• Bootstrap JS重复加载：同时引入了<head>里的popper.min.js+bootstrap.js，以及<body>末尾的bootstrap.bundle.min.js——后者已经包含了Popper.js和jQuery，重复加载会引发脚本冲突。
• CSS加载位置不合理：Bootstrap CSS应该放在<head>最顶部，保证页面渲染时样式已就绪。

修正后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 先加载Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  </head>
  <body>
    <div>
      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
        data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
      </button>

      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom"
        title="Tooltip on bottom">
        Tooltip on bottom
      </button>
    </div>

    <!-- 只加载包含Popper和jQuery的Bootstrap Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <!-- 在脚本加载完成后初始化Tooltip和Popover -->
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
      })
    </script>
  </body>
</html>

修复要点说明 #

1. 移除了<head>里重复的JS文件，仅保留<body>末尾的bootstrap.bundle.min.js，它已经集成了运行所需的jQuery和Popper.js。
2. 将初始化脚本移到bootstrap.bundle.min.js之后，确保$已被正确定义。
3. 调整了CSS的加载位置，避免页面出现无样式闪烁。

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