提问人：Stif 提问时间：10/27/2023 更新时间：10/29/2023 访问量：51
以工具提示作为图例的 Bootstrap 进度条
Bootstrap progress bar with tooltip as legend
问：
我创建了一个引导工具栏，其中包含不同样式的多个部分。现在，我想添加一个工具提示作为图例，解释不同样式的含义。但样式不会显示在工具提示内。这可能吗？我怎样才能做到这一点？
这里有一个 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>
这是我所看到的：
我希望工具提示中的进度条具有我设置的样式，但它们只是显示为灰色。
答：
1赞
traynor
10/28/2023
#1
这是因为没有应用属性，因为它被清理程序删除了，所以条形元素没有宽度，所以没有应用背景。style
仅允许以下属性：div
允许的全局属性 下面提供的任何元素。
'*'： ['类'， '目录'， 'id'， 'lang'， '角色'， ARIA_ATTRIBUTE_PATTERN]，
因此，请使用 Bootstrap 的大小实用程序类 w-100 来添加宽度而不是属性：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/[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 w-100' role='progressbar' 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>或者，您可以通过以下选项禁用消毒剂或添加自定义消毒剂sanitizesanitizeFn
例如，如果您禁用清理程序，您的 HTML 将起作用：
return new bootstrap.Tooltip(tooltipTriggerEl, {sanitize:false})
评论