Bootstrap4 提示框组件

为元素添加小巧的悬浮提示，提供额外的上下文信息

提示框的作用

提示框(Tooltips)是一个小巧的悬浮框，当用户将鼠标悬停在元素上时显示，用于提供额外的信息或说明。Bootstrap 4的提示框组件提供了灵活的位置控制、自定义内容和动画效果。

基础提示框

创建一个基本的提示框，在元素悬停时显示简单的文本信息。

基础提示框示例

将鼠标悬停在以下元素上查看提示框效果：

文本元素提示
HTML 代码：
<!-- 按钮提示框 -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" title="这是一个基础提示框">
  悬停查看提示
</button>

<!-- 文本元素提示框 -->
<span data-toggle="tooltip" title="这是一个文本元素的提示框">
  文本元素提示
</span>

<!-- 图标提示框 -->
<i class="fas fa-question-circle" data-toggle="tooltip" title="这是一个图标提示框"></i>
JavaScript 初始化代码：
// 初始化所有提示框
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

不同位置的提示框

Bootstrap 4 提供了多种提示框位置选项，包括顶部、底部、左侧和右侧。

提示框位置示例
HTML 代码：
<!-- 顶部提示框 -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="顶部提示框">
  顶部提示
</button>

<!-- 底部提示框 -->
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="底部提示框">
  底部提示
</button>

<!-- 左侧提示框 -->
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="左侧提示框">
  左侧提示
</button>

<!-- 右侧提示框 -->
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="right" title="右侧提示框">
  右侧提示
</button>

自定义内容提示框

使用HTML内容创建更丰富的提示框，包含格式化文本、图片或其他元素。

自定义内容提示框示例
HTML 代码：
<!-- 带HTML内容的提示框 -->
<button type="button" class="btn btn-primary" id="htmlTooltip">
  带HTML内容的提示框
</button>

<!-- 自定义样式提示框 -->
<button type="button" class="btn btn-success" id="customContentTooltip">
  自定义样式提示框
</button>
JavaScript 代码：
// HTML内容提示框
$('#htmlTooltip').tooltip({
  html: true,
  title: '<strong>带格式的内容</strong><br><small>支持HTML标记</small><br><i class="fas fa-check text-success"></i> 可以使用图标'
});

// 自定义样式提示框
$('#customContentTooltip').tooltip({
  template: '<div class="tooltip tooltip-custom" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
  title: '自定义样式的提示框'
});
CSS 代码（自定义样式）：
.tooltip-custom .tooltip-inner {
  background-color: #6f42c1;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  padding: 10px 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.tooltip-custom.bs-tooltip-top .arrow::before {
  border-top-color: #6f42c1;
}

/* 其他方向的箭头样式类似 */

触发方式

Bootstrap 4 提示框支持多种触发方式，包括悬停、点击、聚焦和手动触发。

触发方式示例
悬停触发
点击触发
聚焦触发
手动触发
HTML 代码：
<!-- 点击触发 -->
<div id="clickTooltip" title="点击触发">
  点击触发
</div>

<!-- 聚焦触发 -->
<input type="text" id="focusTooltip" placeholder="聚焦触发" title="输入框获得焦点时显示提示">

<!-- 手动触发 -->
<div id="manualTooltip" title="手动触发提示框">
  手动触发
</div>

<!-- 控制按钮 -->
<button id="showTooltip">显示提示框</button>
<button id="hideTooltip">隐藏提示框</button>
<button id="toggleTooltip">切换提示框</button>
JavaScript 代码：
// 点击触发
$('#clickTooltip').tooltip({
  trigger: 'click'
});

// 聚焦触发
$('#focusTooltip').tooltip({
  trigger: 'focus'
});

// 手动触发
var manualTooltip = $('#manualTooltip').tooltip({
  trigger: 'manual'
});

// 手动控制
$('#showTooltip').click(function() {
  manualTooltip.tooltip('show');
});

$('#hideTooltip').click(function() {
  manualTooltip.tooltip('hide');
});

$('#toggleTooltip').click(function() {
  manualTooltip.tooltip('toggle');
});

延迟显示和隐藏

控制提示框显示和隐藏的延迟时间，提供更流畅的用户体验。

延迟示例
JavaScript 代码：
// 显示延迟
$('#delayShowTooltip').tooltip({
  delay: { "show": 1000, "hide": 0 }
});

// 隐藏延迟
$('#delayHideTooltip').tooltip({
  delay: { "show": 0, "hide": 2000 }
});

// 双向延迟
$('#bothDelayTooltip').tooltip({
  delay: { "show": 500, "hide": 1000 }
});

JavaScript API

Bootstrap 4 提示框组件提供了丰富的JavaScript API，允许您通过代码控制提示框行为。

JavaScript API 示例
JavaScript 代码：
// 获取提示框实例
var apiTooltip = $('#apiTooltip').tooltip();

// 显示提示框
apiTooltip.tooltip('show');

// 隐藏提示框
apiTooltip.tooltip('hide');

// 切换提示框
apiTooltip.tooltip('toggle');

// 启用提示框
apiTooltip.tooltip('enable');

// 禁用提示框
apiTooltip.tooltip('disable');

// 切换启用状态
apiTooltip.tooltip('toggleEnabled');

// 更新提示内容
apiTooltip.attr('data-original-title', '更新后的提示内容').tooltip('update');

// 事件监听
apiTooltip.on('show.bs.tooltip', function () {
  console.log('提示框即将显示');
});

apiTooltip.on('shown.bs.tooltip', function () {
  console.log('提示框已完全显示');
});

apiTooltip.on('hide.bs.tooltip', function () {
  console.log('提示框即将隐藏');
});

apiTooltip.on('hidden.bs.tooltip', function () {
  console.log('提示框已完全隐藏');
});

实际应用场景

提示框在各种界面元素中的应用示例。

实际应用示例
表单字段提示
工具栏提示
数据表格提示
产品 价格 状态
笔记本电脑 ¥5,999 有货
智能手机 ¥3,299 限量
HTML 代码（表单字段提示）：
<div class="form-group">
  <label for="password">密码
    <i class="fas fa-question-circle text-muted" data-toggle="tooltip" title="密码必须包含至少8个字符，包括大写字母、小写字母和数字"></i>
  </label>
  <input type="password" class="form-control" id="password" placeholder="输入密码">
</div>

最佳实践

使用提示框组件时，遵循以下最佳实践可以提升用户体验和可访问性。

提示框最佳实践
  • 简洁明了 - 提示内容应该简短明了，避免过多信息
  • 提供有价值的信息 - 提示框应该提供用户需要但界面中没有明确显示的信息
  • 考虑可访问性 - 确保提示框可以通过键盘访问，并为屏幕阅读器提供适当支持
  • 适当的位置 - 根据界面布局选择最合适的提示框位置
  • 一致的触发方式 - 在整个应用中保持一致的提示框触发方式
  • 避免过度使用 - 只在必要时使用提示框，避免界面过于杂乱

学习完成！

恭喜！您已经掌握了Bootstrap 4提示框组件的使用方法。提示框是提供额外信息和改善用户体验的重要组件，合理使用可以大大提升界面的友好性。

继续学习下一章：Bootstrap 4 工具类

上一章:Bootstrap4 模态框 下一章:Bootstrap4 弹出框