CSS Bootstrap tooltip 在模态窗口后显示

在本文中，我们将介绍如何在使用 Bootstrap 的 tooltip 时遇到的一个常见问题，即 tooltip 在模态窗口后面显示的情况，并提供了解决方案。

阅读更多：CSS 教程

问题描述

当使用 Bootstrap 的 tooltip 功能时，我们有时会遇到一个问题，即 tooltip 会在模态窗口的后面显示。这可能导致 tooltip 无法被用户正确地看到，从而影响用户的体验和理解。

问题原因

这个问题的原因是由于模态窗口的 z-index 较高，而 Bootstrap 的 tooltip 的默认 z-index 较低，导致 tooltip 位于模态窗口的下方。

解决方案

要解决这个问题，我们可以通过在 CSS 中设置 tooltip 的 z-index 来调整它的层级，使其位于模态窗口之上。

首先，我们需要为要使用 tooltip 的元素添加一个唯一的 ID 或 class。例如，我们在一个按钮上使用 tooltip：

<button type="button" class="btn btn-primary" id="my-button" data-toggle="tooltip" data-placement="top" title="这是一个提示信息">按钮</button>

然后，我们可以使用自定义的 CSS 样式来设置 tooltip 的 z-index：

#my-button + .tooltip {
  z-index: 1050;
}

这样，tooltip 就会位于模态窗口之上了。这里我们使用了一个伪类选择器 +，将 .tooltip 元素与 #my-button 相邻的下一个 .tooltip 元素选中，并对其设置了一个较高的 z-index 值。

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap 样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    #my-button + .tooltip {
      z-index: 1050;
    }
  </style>
  <title>Tooltip 在模态窗口后显示问题示例</title>
</head>

<body>
  <div class="container mt-5">
    <button type="button" class="btn btn-primary" id="my-button" data-toggle="tooltip" data-placement="top"
      title="这是一个提示信息">按钮</button>

    <!-- 模态窗口 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel">模态窗口标题</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            这是模态窗口的内容。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 Bootstrap 的 JS 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 初始化 tooltip
    (function () {('[data-toggle="tooltip"]').tooltip()
    })
  </script>
</body>

</html>

在上面的示例中，我们在一个按钮上添加了一个 tooltip，并设置了 tooltip 的 z-index 为 1050。可以看到，点击按钮时，tooltip 正确地显示在模态窗口之上。