Bootstrap 5使用Javascript更新工具提示标题

Bootstrap 5的工具提示（Tooltip）是一个非常实用的组件，它允许开发者通过HTML属性或者JavaScript来创建交互式的提示信息。如果你想要使用JavaScript来更新工具提示的标题，可以按照以下步骤进行操作。

基础概念

工具提示是一种当用户鼠标悬停在某个元素上时显示额外信息的UI组件。Bootstrap 5提供了内置的工具提示支持，可以通过HTML属性或者JavaScript API来初始化和控制。

类型

Bootstrap 5的工具提示主要有以下几种触发方式：

hover：鼠标悬停时显示。
focus：元素获得焦点时显示。
click：点击元素时显示。
manual：手动控制显示和隐藏。

应用场景

表单验证：在输入框旁边显示验证提示。
导航辅助：在导航链接上提供额外信息。
数据展示：在图表或其他数据可视化元素上提供详细信息。

更新工具提示标题的方法

如果你想要在运行时使用JavaScript来更新工具提示的标题，可以使用Bootstrap提供的API方法。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Tooltip Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<button type="button" class="btn btn-secondary" id="tooltipButton" data-bs-toggle="tooltip" title="Original Title">
  Hover over me
</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script>
  $(document).ready(function(){
    // 初始化工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    // 更新工具提示标题
    $('#tooltipButton').attr('title', 'Updated Title').tooltip('dispose').tooltip();
  });
</script>

</body>
</html>

解释

HTML部分：创建一个带有data-bs-toggle="tooltip"属性的按钮，并设置初始标题。
JavaScript部分：
- 使用jQuery选择器选中按钮元素。
- 初始化工具提示。
- 使用.attr()方法更新按钮的title属性。
- 调用.tooltip('dispose')来销毁当前的工具提示实例。
- 再次调用.tooltip()来重新初始化工具提示，这样新的标题就会生效。