Bootstrap进度条Tooltip图例样式失效问题求助

我创建了一个包含多段不同样式的Bootstrap进度条，想要添加Tooltip作为图例解释各样式含义，但Tooltip内的进度条样式未生效，仅显示灰色。期望Tooltip内的进度条能正常显示设置的bg-success、opacity-50、progress-bar-striped等样式。

当前效果：

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <div class="progress" style="width:300px" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="<div class='text-start'><div class='progress'><div class='progress-bar bg-success opacity-50' role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100'></div></div>Gebudgetteerd: 800<br><div class='text-start'><div class='progress'><div class='progress-bar bg-success' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100'></div></div>Definitief: 327.79<br><div class='text-start'><div class='progress'><div class='progress-bar-striped bg-success' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100'></div></div>Proef: 118.52</div>">
    <div class="progress-bar bg-success" role="progressbar" style="width: 40.97375%" aria-valuenow="40.97375" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar-striped bg-success" role="progressbar" style="width: 14.815000000000001%" aria-valuenow="14.815000000000001" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success opacity-50" role="progressbar" style="width: 44.21125%" aria-valuenow="44.21125" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

</body>
</html>

原因分析 #

Bootstrap的Tooltip组件会将内容渲染到带有.tooltip类的容器中，而Bootstrap默认CSS里的.tooltip .progress-bar选择器优先级更高，直接把进度条背景色设为灰色，覆盖了自定义的bg-success等样式。

修复步骤 #

添加自定义CSS，提升Tooltip内进度条样式的优先级，确保自定义样式能生效：

/* 修复Tooltip内普通成功色进度条的背景色 */
.tooltip .progress-bar.bg-success {
  background-color: #198754 !important;
}

/* 修复Tooltip内条纹成功色进度条的背景样式 */
.tooltip .progress-bar-striped.bg-success {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/* 修复Tooltip内半透明成功色进度条的透明度 */
.tooltip .progress-bar.bg-success.opacity-50 {
  opacity: 0.5 !important;
}

完整代码示例 #

将上述CSS添加到<head>标签内的<style>标签中即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .tooltip .progress-bar.bg-success {
      background-color: #198754 !important;
    }

    .tooltip .progress-bar-striped.bg-success {
      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    }

    .tooltip .progress-bar.bg-success.opacity-50 {
      opacity: 0.5 !important;
    }
  </style>
</head>
<body>

<div class="container mt-3">
  <div class="progress" style="width:300px" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="<div class='text-start'><div class='progress'><div class='progress-bar bg-success opacity-50' role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100'></div></div>Gebudgetteerd: 800<br><div class='text-start'><div class='progress'><div class='progress-bar bg-success' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100'></div></div>Definitief: 327.79<br><div class='text-start'><div class='progress'><div class='progress-bar-striped bg-success' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100'></div></div>Proef: 118.52</div>">
    <div class="progress-bar bg-success" role="progressbar" style="width: 40.97375%" aria-valuenow="40.97375" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar-striped bg-success" role="progressbar" style="width: 14.815000000000001%" aria-valuenow="14.815000000000001" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success opacity-50" role="progressbar" style="width: 44.21125%" aria-valuenow="44.21125" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

</body>
</html>

说明 #

• 用.tooltip .progress-bar.bg-success这种更具体的选择器，优先级高于Bootstrap默认的.tooltip .progress-bar，确保背景色生效。
• 条纹进度条需要重新指定background-image，因为默认样式会覆盖这个属性。
• !important用于强制覆盖默认样式，保证自定义样式能正常显示。

内容的提问来源于stack exchange，提问作者Stif