什么是提示框？
提示框是当用户将鼠标悬停在元素上时出现的小型悬浮窗口，用于提供额外的信息或说明。
Bootstrap 5 提示框的特点：
- 依赖于第三方库 Popper 进行定位
- 需要手动初始化（出于性能考虑）
- 支持多种触发方式（悬停、聚焦、点击）
- 提供多种定位选项
- 可以包含自定义 HTML 内容
提示框通常用于解释按钮功能、表单字段说明或任何需要额外上下文的地方。
提示框演示
将鼠标悬停在以下按钮上查看提示框效果：
基本用法
HTML 数据属性
最简单的方法是通过 HTML 数据属性添加提示框。
必需的属性：
data-bs-toggle="tooltip"- 启用提示框title- 提示框内容data-bs-placement- 提示框位置（可选）
<button type="button"
class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="这是提示内容">
悬停查看提示
</button>JavaScript 初始化
提示框需要手动初始化。可以通过以下方式：
- 初始化所有提示框
- 初始化特定提示框
- 传递配置选项
// 初始化所有提示框
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function(
tooltipTriggerEl
) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// 或初始化单个提示框
var myTooltip = new bootstrap.Tooltip(
document.getElementById('myTooltip'),
{
placement: 'top',
title: '自定义提示内容'
}
);提示框定位
Bootstrap 5 提示框支持多种定位选项，以适应不同的布局需求。
定位演示
可用定位选项
top- 顶部（默认）bottom- 底部left- 左侧right- 右侧auto- 自动选择最佳位置
HTML 代码示例
<!-- 顶部提示框 -->
<button data-bs-toggle="tooltip"
data-bs-placement="top"
title="顶部提示">
顶部提示
</button>
<!-- 自动定位 -->
<button data-bs-toggle="tooltip"
data-bs-placement="auto"
title="自动定位提示">
自动定位
</button>自定义提示框
自定义内容
提示框可以包含自定义 HTML 内容，而不仅仅是纯文本。
使用 data-bs-html="true" 属性启用 HTML 内容。
<button type="button"
class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-html="true"
title="<strong>加粗文本</strong><br><em>斜体文本</em><br><span class='text-danger'>红色文本</span>">
带HTML内容的提示框
</button>自定义样式
通过 CSS 自定义提示框的外观，包括背景色、文字颜色等。
.custom-tooltip .tooltip-inner {
background-color: #6f42c1;
font-size: 14px;
padding: 8px 12px;
}
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: #6f42c1;
}高级选项
触发方式
提示框可以通过多种方式触发：
hover- 鼠标悬停（默认）focus- 获得焦点click- 点击manual- 手动触发
<!-- 点击触发 -->
<button data-bs-toggle="tooltip"
data-bs-trigger="click"
title="点击显示提示">
点击触发
</button>
<!-- 多个触发方式 -->
<button data-bs-toggle="tooltip"
data-bs-trigger="hover focus"
title="悬停或聚焦显示">
悬停或聚焦
</button>延迟与动画
可以控制提示框的显示/隐藏延迟和动画效果。
delay- 显示/隐藏延迟animation- 启用/禁用淡入淡出动画
// 通过JavaScript配置
var tooltip = new bootstrap.Tooltip(element, {
delay: { "show": 500, "hide": 100 },
animation: true
});<!-- 通过数据属性配置 -->
<button data-bs-toggle="tooltip"
data-bs-delay='{"show":500,"hide":100}'
title="延迟显示的提示">
延迟提示
</button>实际应用示例
在表单中使用提示框
提示框使用最佳实践
内容简洁
- 提示框内容应简洁明了
- 避免使用长段落或复杂信息
- 重要信息不应只放在提示框中
合理定位
- 根据页面布局选择合适的定位
- 避免提示框遮挡重要内容
- 使用自动定位适应不同屏幕尺寸
无障碍访问
- 为键盘用户提供焦点触发
- 确保提示框内容对屏幕阅读器可见
- 避免仅依赖视觉提示
性能考虑
- 仅在需要时初始化提示框
- 避免在大量元素上使用提示框
- 考虑移动设备上的触摸交互