在 Bootstrap 4 中，提示框（Tooltips） 是一种小型的弹出提示，通常用于为用户提供额外的界面信息或指示。提示框通常显示在用户悬停、聚焦或点击元素时，能够提供简洁的提示信息。

1. 基本的提示框

首先，需要引入 Bootstrap 的 JavaScript 和 Popper.js，这是 Bootstrap 提示框正常工作的依赖项。然后，你可以通过 data-toggle="tooltip" 属性启用提示框。

示例：基本提示框

<!-- 启用提示框的元素 -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="This is a tooltip">
  Hover over me
</button>

解释：

  • data-toggle="tooltip"：启用提示框功能。
  • title：提示框的文本内容。
  • data-placement="top"：定义提示框显示的位置，可以是 top、bottom、left、right 等。

2. 提示框的位置

你可以使用 data-placement 属性来控制提示框的位置。可以设置的值有：

  • top：显示在元素的顶部。
  • bottom：显示在元素的底部。
  • left：显示在元素的左侧。
  • right：显示在元素的右侧。

示例：不同位置的提示框

<!-- 上方 -->
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<!-- 右侧 -->
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

<!-- 下方 -->
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>

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

3. 启用提示框（JavaScript 方法）

除了通过 data-toggle 属性启用提示框，您还可以通过 JavaScript 手动启用和控制提示框。

示例：启用提示框

<button type="button" class="btn btn-warning" id="tooltipBtn" title="Tooltip with JavaScript">
  Hover over me
</button>

<script>
  // 手动启用提示框
  $(document).ready(function() {
    $('#tooltipBtn').tooltip();
  });
</script>

示例：手动销毁提示框

<script>
  // 手动销毁提示框
  $(document).ready(function() {
    $('#tooltipBtn').tooltip('dispose');
  });
</script>

4. 显示和隐藏提示框（JavaScript 控制）

你可以通过 JavaScript 控制提示框的显示和隐藏，使用以下方法：

  • tooltip('show')：手动显示提示框。
  • tooltip('hide')：手动隐藏提示框。
  • tooltip('toggle')：切换提示框的显示和隐藏。

示例：手动显示和隐藏提示框

<button type="button" class="btn btn-danger" id="tooltipBtn" title="Show/Hide Tooltip">
  Show/Hide Tooltip
</button>

<script>
  // 手动显示提示框
  $('#tooltipBtn').tooltip('show');
  
  // 手动隐藏提示框
  $('#tooltipBtn').tooltip('hide');
</script>

5. 自定义提示框内容和外观

除了默认的提示框，你还可以通过 custom HTML 或 CSS 来改变提示框的样式和内容。

示例：使用 HTML 内容

<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="<strong>Bold</strong> Tooltip">
  Hover over me
</button>

示例：自定义提示框样式

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Styled Tooltip">
  Hover over me
</button>

<style>
  /* 自定义提示框样式 */
  .tooltip-inner {
    background-color: #ff6347; /* 设置背景颜色 */
    color: white; /* 设置文本颜色 */
    font-size: 16px; /* 设置字体大小 */
  }

  .tooltip-arrow {
    border-top-color: #ff6347; /* 设置箭头的颜色 */
  }
</style>

6. 启用提示框的延迟显示和隐藏

通过 delay 配置项，可以设置提示框显示和隐藏的延迟时间。

示例：设置延迟时间

<button type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="top" title="Delayed Tooltip" data-delay="500">
  Hover over me
</button>

JavaScript 示例：自定义延迟时间

<button type="button" class="btn btn-dark" id="tooltipBtn" title="Delayed Tooltip">
  Hover over me
</button>

<script>
  // 自定义延迟显示和隐藏
  $('#tooltipBtn').tooltip({
    delay: { "show": 500, "hide": 100 }
  });
</script>

7. 禁用提示框

如果你希望在某些情况下禁用提示框，可以通过 data-disable 或 JavaScript 方法禁用它。

示例：禁用提示框

<button type="button" class="btn btn-secondary" id="tooltipBtn" title="Disabled Tooltip" disabled>
  Hover over me
</button>

总结

  • 启用提示框：使用 data-toggle="tooltip" 和 title 属性。
  • 位置：使用 data-placement 控制提示框的位置（top、bottom、left、right）。
  • JavaScript 控制：可以通过 tooltip('show'), tooltip('hide'), tooltip('toggle') 等方法来显示、隐藏或切换提示框。
  • 自定义样式：通过 CSS 来更改提示框的外观（例如背景颜色、字体大小）。
  • 延迟显示和隐藏：使用 data-delay 或 JavaScript 来设置提示框的延迟时间。
  • 禁用提示框：使用 disabled 属性禁用按钮上的提示框。

通过这些功能，Bootstrap 提供了一个非常灵活的工具来在网页上展示提示信息，增强用户体验。