我试图在一个引导弹窗内显示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>

当前回答

我真的很讨厌把长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});

其他回答

你可以更改文件'ui-bootstrap-tpls-0.11.0.js'中的'template/popover/popover.html' 把“ng-bind”改为“bind-html-unsafe”

它会用html显示所有弹出窗口。 这是不安全的html。仅当您信任html时使用。

我真的很讨厌把长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});

你可以使用弹窗事件,并通过属性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>'>

你可以使用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>