带有工具提示的引导进度条作为图例

问题描述 投票：0回答：1

我创建了一个引导工具栏，其中包含不同样式的多个部分。现在我想添加一个用作图例的工具提示，解释不同样式代表什么。但样式不会出现在工具提示内。这有可能吗？我怎样才能做到这一点？

这里有一个jsfiddle来演示这个问题： https://jsfiddle.net/xdg5b7ys/

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

这是我所看到的：

我希望工具提示中的进度条具有我在其上设置的样式，但它们只是显示为灰色。

progress-bar tooltip bootstrap-5
1个回答
0
投票

这是因为 

style
属性没有被应用，因为它被 sanitizer 删除了，所以 bar 元素没有宽度，所以没有应用背景。

改用 Bootstrap 的尺寸实用程序类：

w-100

:





<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 w-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 w-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 w-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>





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.