Bootstrap 为元素提供信息提示框,设置步骤如下:添加 data-toggle 属性和提示文本;加载 Bootstrap JavaScript 库;初始化提示框插件。

设置 Bootstrap 提示框
Bootstrap 提供了提示框组件,用于在用户悬停或点击元素时显示信息。要设置提示框,您需要执行以下步骤:
1. 添加 HTML 标记
在您要显示提示框的元素中添加 data-toggle="tooltip" 属性和提示文本。
2. 加载 Bootstrap JavaScript 库
在您的页面中包含 Bootstrap JavaScript 库。
3. 初始化提示框
使用 Tooltip 类初始化提示框。
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});自定义提示框外观
您可以通过自定义 CSS 来更改提示框的外观。例如,您可以更改提示框的颜色:
.tooltip-inner {
background-color: #000;
}配置提示框选项
可以通过修改 data 属性来配置提示框选项。例如,您可以更改提示框的放置:
可用选项包括:
-
placement:提示框的放置(如top、right、bottom、left) -
trigger:触发提示框的事件(如hover、focus、click) -
delay:提示框显示和隐藏的延迟(以毫秒为单位) -
html:允许提示框包含 HTML 内容
示例
以下代码展示了一个完全自定义的提示框:
.tooltip-inner {
background-color: #000;
color: #fff;
}$(function () {
$('[data-toggle="tooltip"]').tooltip();
});










