Javascript 带有 HTML 内容的 Bootstrap 4 Popover
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47707838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Popover with HTML Content
提问by Nguy?n
This is my code, but it will not work.
这是我的代码，但它不起作用。
When I use the native Bootstrap PopOver with HTML in it's content, the frontend is not displaying that PopOver and the HTML Source is malformatted.
当我在其内容中使用带有 HTML 的本机 Bootstrap PopOver 时，前端没有显示该 PopOver 并且 HTML 源格式错误。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<style>
.popover{
color: #757575 !important;
}
</style>
</head>
<body>
<div class="container">
<span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span>
</div>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>Remove Class property. It can work.
删除类属性。它可以工作。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<style>
.popover{
color: #757575 !important;
}
</style>
</head>
<body>
<div class="container">
<span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span>
</div>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.
我试图在引导程序弹出窗口中显示 HTML，但不知何故它不起作用。我在这里找到了一些答案，但对我不起作用。如果我做错了什么，请告诉我。
回答by Klooven
You can use data-html="true"on the pop over span.
您可以data-html="true"在弹出跨度上使用。
This enables HTML content.
这将启用 HTML 内容。
See more here: http://getbootstrap.com/docs/4.0/components/popovers/#options
在此处查看更多信息：http: //getbootstrap.com/docs/4.0/components/popovers/#options
回答by devN
Just wrap the popoverclass in single quotes like this.
只需popover像这样用单引号包裹类。
<div class='popover'>text text</div>
instead of
代替
<div class="popover">text text</div>
回答by Isin Altinkaya
Instead of adding data-html="true"to all popovers, you can just use it like this:
data-html="true"您可以像这样使用它，而不是添加到所有弹出窗口：
$('[data-toggle="popover"]').popover({html:true});
回答by Fahrettin Aksoy
$element.popover({
animation: false,
html: true,
sanitize: false,
placement: 'bottom',
trigger: 'manual',
content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>',
});
