我试图在一个引导弹窗内显示HTML，但不知为何它不工作。我在这里找到了一些答案，但对我没用。如果我做错了什么，请告诉我。
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
当前回答
你只需要把data-html="true"的链接弹出窗口。会有用的。
其他回答
你需要创建一个启用了html选项的弹出窗口实例(将其放在弹出窗口JS代码之后的javascript文件中):
$ (' .popover-with-html ')。弹出窗口({HTML: true});
你不能使用<li href="#"，因为它属于<a href="#"，这就是为什么它不起作用，改变它，一切都好。
这里是工作的JSFiddle，它向你展示了如何创建引导弹窗。
代码的相关部分如下:
HTML:
<!--
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div><b>Example popover</b> - content</div>">Example popover</a>
JavaScript:
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
顺便说一下，你总是需要至少$("[data-toggle=popover]").popover();启用弹出窗口。但是在data-toggle="popover"的地方，你也可以使用id="my-popover"或class="my-popover"。只需要记住使用例如:$("#my-popover").popover();在这些情况下。
以下是完整规范的链接: 引导弹窗
奖金:
如果出于某种原因，您不喜欢或无法从数据内容和标题标签中读取弹出窗口的内容。你也可以使用隐藏的div和一些JavaScript。这里有一个例子。
你可以使用attribute data-html="true":
<a href="#" id="example" rel="popover"
data-content="<div>This <b>is</b> your div content</div>"
data-html="true" data-original-title="A Title">popover</a>
你可以使用弹窗事件，并通过属性data-width来控制宽度
$('[data-toggle="popover-huongdan"]').popover({ html: true }); $('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () { var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width")); $("div[id^=popover]").css("max-width", width); }); <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code"> <i class="far fa-question-circle"></i> </a>
在bootstrap 4.6的最新版本中，您可能还需要使用sanitize:false来添加复杂的html。
$('.popover-with-html').popover({ html : true, sanitize : false })
