Bootstrap 4 中的 HTML Popover 失败
Posted
技术标签:
【中文标题】Bootstrap 4 中的 HTML Popover 失败【英文标题】：HTML Popover fails in Bootstrap 4 【发布时间】：2019-08-19 21:43:42 【问题描述】：以下代码应该创建一个引导弹出窗口，其中包含一个名为boomhtml 的 HTML 字符串。不幸的是，代码只能在引导程序 3 中正确执行。引导程序 4 导致一个空的弹出窗口。只有当我使用与<h1></h1> 不同的 html 标签时，才会出现这种情况。不知何故，引导程序清理了输入。我还没有查看 github repo。
任何帮助都非常感谢????
$(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>【问题讨论】：
【参考方案1】：在 bootstrap for popover 的 documentation 上，它说 title 需要一个字符串、元素或函数。由于您要传递 HTML，因此最好将其作为元素而不是字符串传递。将其作为元素传递可以解决问题。请参阅此处codepen link 或以下 sn-p。
$(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>【讨论】：
【参考方案2】：下面的代码可以解决问题 将css中的蓝色改为类
在 JS 文件中使用以下代码，我更改了几行代码
$(document).ready(function ()
$(document).ready(function()
$('[data-toggle="tooltip"]').tooltip();
);
var boomHTML = "<p class='blue'>Boooom</p>";
var boomTitle = "Title";
$('#shapes-trigger').tooltip(
title: 'Shapes'
).popover(
html : true,
title:boomTitle,
content: 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');
);
);
【讨论】：
以上是关于Bootstrap 4 中的 HTML Popover 失败的主要内容，如果未能解决你的问题，请参考以下文章
Android studio 3.4.1 使用 bootstrap 中的组件实例
使用 Bootstrap javascript 文件时播放 1.2.4 中的特殊行为