Bootstrap 5 的 Tooltip（工具提示） 插件用于在鼠标悬停、聚焦或点击时显示小型弹出提示框，通常用于为元素提供简短的上下文信息。它依赖 Popper.js（已包含在 bootstrap.bundle.min.js 中）来实现动态定位，并结合 Transition 插件实现平滑动画效果。

以下是对 Bootstrap 5 Tooltip 插件的详细概览，包括功能、用法和示例代码。

---

1. 功能与用途

• 功能：
• 显示小型弹出提示框，包含简短的文本说明。
• 支持动态定位（通过 Popper.js 自动调整位置）。
• 提供淡入淡出动画（基于 Transition 插件）。
• 支持多种触发方式：悬停（hover）、聚焦（focus）、点击（click）。
• 用途：
• 为按钮、链接或表单元素提供额外说明。
• 显示帮助文本或提示信息。
• 增强用户界面交互性。
• 关键类：.tooltip, .tooltip-inner, .tooltip-arrow.

---

2. 工作原理

• 结构：
• 触发元素（如 <button> 或 <a>）通过 data-bs-toggle="tooltip" 启用插件。
• 提示内容通过 data-bs-title 或 title 属性定义。
• 弹出框由 .tooltip 容器、.tooltip-inner（内容）和 .tooltip-arrow（箭头）组成，动态生成。
• 触发：通过 HTML 属性（如 data-bs-trigger）或 JavaScript 配置触发方式。
• 定位：Popper.js 确保提示框根据屏幕空间自动调整位置（例如，顶部、底部、左侧、右侧）。
• 过渡效果：使用 CSS transition 属性实现淡入淡出动画。

---

3. 常用属性与选项

• HTML 属性（通过 data-bs-* 配置）：
• data-bs-toggle="tooltip": 启用工具提示。
• data-bs-title="提示内容": 设置提示框的文本内容。
• data-bs-placement="top|bottom|left|right": 指定提示框位置（默认 top）。
• data-bs-trigger="hover|focus|click": 设置触发方式（默认 hover focus）。
• data-bs-html="true": 允许提示内容包含 HTML。
• data-bs-delay="number|{show: number, hide: number}": 设置显示/隐藏延迟（默认 0）。
• JavaScript 选项：
• placement: 提示框位置（top, bottom, left, right, 或 auto）。
• title: 提示内容（可为字符串或函数）。
• html: 是否解析 HTML 内容（默认 false）。
• delay: 显示/隐藏延迟（例如，{ show: 500, hide: 100 }）。
• trigger: 触发方式（click, hover, focus, manual）。
• popperConfig: 自定义 Popper.js 配置。
• 事件：
• show.bs.tooltip: 提示框开始显示时触发。
• shown.bs.tooltip: 提示框完全显示后触发。
• hide.bs.tooltip: 提示框开始隐藏时触发。
• hidden.bs.tooltip: 提示框完全隐藏后触发.
• inserted.bs.tooltip: 提示框插入 DOM 时触发.

---

4. 使用方法

1. 引入 Bootstrap 依赖：
   确保包含 Bootstrap 的 CSS 和 JS 文件（bootstrap.bundle.min.js 包含 Popper.js）：

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2. 创建工具提示：
   为元素添加 data-bs-toggle="tooltip" 和 data-bs-title：

   <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="这是一个提示！">
     悬停查看提示
   </button>

3. 初始化工具提示：
   工具提示需要通过 JavaScript 手动初始化：

   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

4. 通过 JavaScript 控制：
   动态显示或隐藏提示框：

   const tooltip = new bootstrap.Tooltip(document.querySelector('.my-tooltip'));
   tooltip.show(); // 显示提示框
   tooltip.hide(); // 隐藏提示框

---

5. 示例代码：工具提示示例

以下是一个完整的网页示例，展示如何使用 Bootstrap 的 Tooltip 插件，包括多种触发方式、位置和 HTML 内容支持。

Bootstrap 工具提示示例

Bootstrap 工具提示示例

顶部提示 点击触发 HTML 提示 延迟提示

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
    // 初始化所有工具提示
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

    // 监听提示框事件
    tooltipTriggerList.forEach(tooltip => {
        tooltip.addEventListener('shown.bs.tooltip', () => {
            console.log('提示框已显示');
        });
        tooltip.addEventListener('hidden.bs.tooltip', () => {
            console.log('提示框已隐藏');
        });
    });
</script>

---

6. 关键点

• 初始化：工具提示必须通过 JavaScript 初始化，未初始化的提示不会显示。
• 可访问性：
• 使用 aria-label 或 aria-describedby 为触发元素提供描述。
• 确保提示内容简洁，避免影响屏幕阅读器体验。
• 过渡效果：
• 默认使用淡入淡出动画，可通过 CSS 自定义 transition 属性。
• 例如，调整动画持续时间：
  css .tooltip { transition: opacity 0.3s ease-in-out; }
• 定位：
• 使用 data-bs-placement 或 JavaScript 的 placement 选项控制位置。
• auto 模式会根据可用空间动态选择最佳位置。
• HTML 内容：
• 启用 data-bs-html="true" 后，需确保内容安全，避免 XSS 攻击。

---

7. 自定义工具提示

• 样式：
• 修改提示框的背景、字体或箭头：
  css .tooltip-inner { background-color: #007bff; color: white; font-size: 14px; } .tooltip .tooltip-arrow::before { border-top-color: #007bff; /* 调整箭头颜色 */ }
• 动画：
• 添加自定义动画（如缩放效果）：
  css .tooltip { transform: scale(0.8); opacity: 0; } .tooltip.show { transform: scale(1); opacity: 1; }
• 动态内容：
• 使用 JavaScript 动态设置提示内容：
  javascript const tooltip = new bootstrap.Tooltip(document.querySelector('.my-tooltip'), { title: () => `当前时间: ${new Date().toLocaleTimeString()}` });

---

8. 注意事项

• 依赖：Tooltip 插件需要 Popper.js（包含在 bootstrap.bundle.min.js 中）和 Transition 插件。
• 初始化：必须手动初始化，否则提示框不会显示。
• 性能：大量工具提示可能影响性能，建议按需初始化或销毁：

  tooltip.dispose(); // 销毁提示框

• 触发方式：避免在移动端使用 hover 触发，推荐 click 或 focus。
• 内容长度：提示内容应简短，避免过长导致布局问题。

---

9. 更多信息

• 详细文档：请参考 Bootstrap 5 官方文档 – Tooltips.
• 相关插件：Tooltip 常与 Popovers、Buttons 或 Forms 结合使用，建议查看相关文档。

如果你需要更复杂的工具提示示例（如动态内容、自定义定位）或对某个功能的深入解释，请告诉我！
“`