我试图在一个引导弹窗内显示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>
当前回答
这是一个老问题，但这是另一种方式，使用jQuery重用弹出窗口，并继续使用原始的引导数据属性，使其更具语义性:
的链接
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>
显示的自定义内容
<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Javascript
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
摆弄完整的例子: http://jsfiddle.net/tomsarduy/262w45L5/
其他回答
我真的很讨厌把长HTML内的属性，这是我的解决方案，清楚和简单(替换?随你喜欢):
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>
then
var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
在bootstrap 4.6的最新版本中，您可能还需要使用sanitize:false来添加复杂的html。
$('.popover-with-html').popover({ html : true, sanitize : false })
你可以使用弹窗事件，并通过属性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>
我使用了一个弹出在一个列表，我通过HTML给出了一个例子
<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
对于引导>= 5.2
在弹窗中启用HTML内容:data-bs-html="true"
例子:
<a href="#"
data-bs-toggle="popover"
data-bs-title="A Title"
data-bs-html="true"
data-bs-content="This is <strong>bold</strong>">popover</a>
道格:https://getbootstrap.com/docs/5.3/components/popovers/选项
