Bootstrap 5 Popover动态文本

Bootstrap 5 Popover 是一种用于显示额外信息的弹出框，当用户点击或悬停在元素上时触发。它非常适合用于展示工具提示、表单验证消息或其他上下文相关的信息。

基础概念

Popover 组件依赖于 Popper.js 库来定位弹出框。Bootstrap 5 内置了对 Popper.js 的支持，因此在使用 Popover 时无需单独引入 Popper.js。

类型与应用场景

工具提示：解释某个按钮或链接的功能。
表单验证：显示输入框的错误信息或提示。
上下文帮助：为用户提供关于当前页面元素的额外信息。
导航辅助：在复杂的界面中提供快速导航指引。

示例代码

以下是一个使用 Bootstrap 5 Popover 动态显示文本的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Popover Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<button id="popoverButton" type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="">
  Click to toggle popover
</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })

  // 动态更新 Popover 内容
  document.getElementById('popoverButton').addEventListener('shown.bs.popover', function () {
    var popoverContent = document.createElement('div');
    popoverContent.textContent = 'This is dynamic content!';
    this.getAttribute('data-bs-content', '');
    this.setAttribute('data-bs-content', popoverContent.innerHTML);
  });
</script>

</body>
</html>