以下代码应该创建一个 Bootstrap 弹出窗口，其中包含名为 boomHTML 的 HTML 字符串。不幸的是，代码只能在 bootstrap 3 中正确执行。Bootstrap 4 会导致空的弹出窗口。仅当我使用不同于 <h1></h1> 的 html 标签时才会出现这种情况。 。 Bootstrap 以某种方式清理输入。我还没有研究过 github 存储库。
非常感谢任何帮助🙏
$(document).ready(function () {
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
var boomHTML = "<blue>Boooom</blue>";
$('#shapes-trigger').tooltip({
title: 'Shapes'
}).popover({
html : true,
title: boomHTML,
placement: 'top'
}).on('show.bs.popover', function() {
$(this).tooltip('hide');
$('[data-toggle="tooltip"]').tooltip('disable');
}).on('hide.bs.popover', function() {
$('[data-toggle="tooltip"]').tooltip('enable');
});
});.container {
margin-top: 100px;
}
#shapes-trigger {
padding: 20px;
font-family: Arial;
font-weight: bold;
font-size: 3em;
color: #fff;
background: #000;
cursor: pointer;
}
blue {
font-size: 3em;
font-weight: bold;
color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<span id="shapes-trigger" data-toggle="tooltip" data-html="true">Hello World</span>
</div><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>最佳答案
关于documentation在弹出窗口的 Bootstrap 中，它说 title 需要一个 string 、 element 或 function 。由于您要传递 HTML，因此最好将其作为元素而不是字符串传递。将其作为元素传递可以解决此问题。请参阅此处 codepen link或下面的代码片段。
$(document).ready(function () {
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
var boomHTML =document.createElement("blue");
boomHTML.innerText= "BOOOM"
$('#shapes-trigger').tooltip({
title: 'Shapes'
}).popover({
html : true,
title: boomHTML,
placement: 'top'
}).on('show.bs.popover', function() {
$(this).tooltip('hide');
$('[data-toggle="tooltip"]').tooltip('disable');
}).on('hide.bs.popover', function() {
$('[data-toggle="tooltip"]').tooltip('enable');
});
});.container {
margin-top: 100px;
}
#shapes-trigger {
padding: 20px;
font-family: Arial;
font-weight: bold;
font-size: 3em;
color: #fff;
background: #000;
cursor: pointer;
}
blue {
font-size: 3em;
font-weight: bold;
color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<span id="shapes-trigger" data-toggle="tooltip" data-html="true">Hello World</span>
</div><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>关于javascript - HTML 弹出窗口在 Bootstrap 4 中失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55409140/