Bootstrap 4 提示框 - 悬停元素信息展示

最后编辑于2025-04-14 12:28:38.70121 +0800 CST

Bootstrap 4 提示框(Tooltip)

提示框(Tooltip)是Bootstrap中常用的一种交互组件，当用户将鼠标悬停在元素上时，会显示一个小弹窗提供额外信息，鼠标移开时自动消失。这种UI元素可以帮助简化界面，同时提供必要的上下文信息。

提示框基础用法

创建提示框非常简单，只需要向元素添加data-toggle="tooltip"属性，并设置title属性作为提示内容：

html 
1<a href="#" data-toggle="tooltip" title="这是一个提示框内容">鼠标悬停在此处查看提示</a>

初始化提示框

重要的是，提示框组件不会自动显示，你必须手动初始化它们。通常我们在文档加载完成后使用jQuery初始化所有提示框：

html 
1<script>
2$(document).ready(function(){
3    $('[data-toggle="tooltip"]').tooltip(); 
4});
5</script>

确保在使用提示框之前已经引入了Bootstrap的JavaScript文件和jQuery库。

提示框位置设置

默认情况下，提示框显示在元素的上方(top)。你可以使用data-placement属性来更改提示框的显示位置：

html 
 1<!-- 上方显示（默认） -->
 2<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="顶部提示">
 3  顶部提示框
 4</button>
 5
 6<!-- 右侧显示 -->
 7<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="右侧提示">
 8  右侧提示框
 9</button>
10
11<!-- 底部显示 -->
12<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="底部提示">
13  底部提示框
14</button>
15
16<!-- 左侧显示 -->
17<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="左侧提示">
18  左侧提示框
19</button>

HTML内容提示框

如果需要在提示框中显示HTML内容，可以使用data-html="true"属性，并在title中编写HTML代码：

html 
1<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" 
2        title="<em>强调文本</em> <u>下划线文本</u> <b>粗体文本</b>">
3  HTML内容提示框
4</button>

在初始化时也需要指定HTML选项：

javascript 
1$(document).ready(function(){
2    $('[data-toggle="tooltip"]').tooltip({
3        html: true
4    });
5});

提示框触发方式

Bootstrap提示框可以通过不同的方式触发，默认是鼠标悬停(hover)。你可以使用data-trigger属性来指定触发方式：

html 
 1<!-- 点击触发 -->
 2<button type="button" class="btn btn-primary" data-toggle="tooltip" data-trigger="click" title="点击后显示提示框">
 3  点击触发提示框
 4</button>
 5
 6<!-- 聚焦触发 -->
 7<button type="button" class="btn btn-info" data-toggle="tooltip" data-trigger="focus" title="聚焦后显示提示框">
 8  聚焦触发提示框
 9</button>
10
11<!-- 多种触发方式 -->
12<button type="button" class="btn btn-warning" data-toggle="tooltip" data-trigger="hover focus" title="悬停或聚焦时显示">
13  多种方式触发提示框
14</button>

提示框选项

初始化提示框时，你可以传递一个配置对象来自定义行为：

javascript 
 1$(document).ready(function(){
 2    $('[data-toggle="tooltip"]').tooltip({
 3        animation: true,     // 使用淡入淡出动画效果
 4        delay: {show: 500, hide: 100},  // 显示和隐藏的延迟时间(毫秒)
 5        placement: 'auto',   // 自动判断最佳位置
 6        trigger: 'hover',    // 触发方式
 7        container: 'body',   // 将提示框附加到的HTML元素
 8        template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' // 自定义模板
 9    });
10});

提示框事件

提示框组件提供了多种事件，可以在提示框显示或隐藏时执行自定义代码：

javascript 
 1// 提示框显示前
 2$('#myTooltip').on('show.bs.tooltip', function () {
 3  // 执行某些操作
 4});
 5
 6// 提示框完全显示后
 7$('#myTooltip').on('shown.bs.tooltip', function () {
 8  // 执行某些操作
 9});
10
11// 提示框隐藏前
12$('#myTooltip').on('hide.bs.tooltip', function () {
13  // 执行某些操作
14});
15
16// 提示框完全隐藏后
17$('#myTooltip').on('hidden.bs.tooltip', function () {
18  // 执行某些操作
19});

编程方式控制提示框

除了自动触发外，你还可以使用JavaScript方法来手动控制提示框：

javascript 
 1// 显示提示框
 2$('#myElement').tooltip('show');
 3
 4// 隐藏提示框
 5$('#myElement').tooltip('hide');
 6
 7// 切换提示框的显示状态
 8$('#myElement').tooltip('toggle');
 9
10// 销毁提示框
11$('#myElement').tooltip('dispose');
12
13// 更新提示框内容
14$('#myElement').attr('data-original-title', '新的提示内容').tooltip('update');

注意事项

  1. 在小屏幕设备上，提示框可能会溢出屏幕边缘，确保在响应式设计中谨慎使用
  2. 避免在滚动元素上使用提示框，因为位置计算可能不准确
  3. 当元素可以通过键盘访问时，确保提示框内容对屏幕阅读器用户也是可访问的

应用场景

提示框最适合用于以下场景：

  • 图标按钮的功能提示
  • 表单字段的填写说明
  • 缩略文本的完整内容显示
  • 专业术语的解释说明
  • 状态图标的详细信息

通过合理使用提示框组件，可以在不占用界面空间的情况下，为用户提供必要的上下文信息，提升用户体验。