Bootstrap 为元素提供信息提示框，设置步骤如下：添加 data-toggle 属性和提示文本；加载 Bootstrap JavaScript 库；初始化提示框插件。
设置 Bootstrap 提示框
Bootstrap 提供了提示框组件，用于在用户悬停或点击元素时显示信息。要设置提示框，您需要执行以下步骤：
1. 添加 HTML 标记
在您要显示提示框的元素中添加 data-toggle="tooltip" 属性和提示文本。
<code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本">按钮</button></code>
2. 加载 Bootstrap JavaScript 库
在您的页面中包含 Bootstrap JavaScript 库。
<code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script></code>
3. 初始化提示框
使用 Tooltip 类初始化提示框。
<code class="javascript">$(function () {
$('[data-toggle="tooltip"]').tooltip();
});</code>自定义提示框外观
您可以通过自定义 CSS 来更改提示框的外观。例如，您可以更改提示框的颜色：
<code class="css">.tooltip-inner {
background-color: #000;
}</code>配置提示框选项
可以通过修改 data 属性来配置提示框选项。例如，您可以更改提示框的放置：
<code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top">按钮</button></code>
可用选项包括：
-
placement：提示框的放置（如top、right、bottom、left） -
trigger：触发提示框的事件（如hover、focus、click） -
delay：提示框显示和隐藏的延迟（以毫秒为单位） -
html：允许提示框包含 HTML 内容
示例
以下代码展示了一个完全自定义的提示框：
<code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top" data-trigger="click" data-delay="500" data-html="true">按钮</button></code>
<code class="css">.tooltip-inner {
background-color: #000;
color: #fff;
}</code><code class="javascript">$(function () {
$('[data-toggle="tooltip"]').tooltip();
});</code> 
