所以我在这里真的很困惑，因为我实际上是在使用文档的示例，而它只是拒绝工作。我有
- 进口Boostrap
- 进口Popover
- 初始化的工具提示
- 初始化Popover
所有内容均按照文档执行。
然后我添加了以下代码来试用弹出窗口：
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
弹出窗口显示的代码与文档中的代码相同，但错误的是，它只显示标题而不显示内容。一旦第一个切换完成，也就是说，一旦你显示并隐藏了popover，它就不会再显示了。
的屏幕截图
顺便说一下，这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="./assets/scripts/init-tooltips.js" defer></script>
<script src="./assets/scripts/init-popover.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">About me</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./index.html">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./life.html">Life</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./life.html">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</div>
</nav>
</head>
<body>
<h1 class="center">Education</h1>
<figure class="center">
<img src=./assets/images/1.jpeg>
<img src=./assets/images/2.jpeg>
<img src=./assets/images/3.jpeg>
<img src=./assets/images/4.jpeg>
<img src=./assets/images/5.jpeg>
</figure>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<p>test</p>
</body>这是因为您在按钮上使用data-bs-popover和data-bs-content，这是Bootstrap 5格式。
您正在使用呼叫Bootstrap 4
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3...........</script>
将data-popover和data-content用于引导程序4。