Twitter Bootstrap popover中的HTML

Question

我试图在引导程序弹出窗口中显示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>

Answer 1

你不能使用,<li href="#"因为它属于<a href="#"那就是为什么它不工作,改变它,这一切都很好.

这是JSFiddle的工作,它向您展示如何创建bootstrap popover.

代码的相关部分如下:

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();需要启用popover.但代替data-toggle="popover"你也可以使用id="my-popover"或class="my-popover".请记住$("#my-popover").popover();在这些情况下使用例如:启用它们.

以下是完整规范的链接: Bootstrap Popover

奖金:

如果由于某种原因你不喜欢(或不能)从data-toggle和title标签中读取弹出窗口的内容.您还可以使用例如隐藏的div和更多的JavaScript.这是一个例子.

干杯.

Answer 2

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

Answer 3

以可重用方式指定弹出窗口内容的另一种方法是创建一个新的数据属性data-popover-content,并像这样使用它:

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

当你有大量的html放入你的popovers时,这可能很有用.

这是一个示例小提琴:http://jsfiddle.net/z824fn6b/

Answer 4

您需要创建一个启用了html选项的弹出框实例(在弹出的JS代码之后将其放在您的javascript文件中):

$('.popover-with-html').popover({ html : true });

Answer 5

我在列表中使用了弹出窗口,我通过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>'>

Answer 6

您只需要放入data-html="true"链接弹出窗口。会工作。

Answer 7

这是一个老问题，但这是另一种方式，使用 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/

Answer 8

这是对Jack的出色答案的略微修改.

以下内容确保没有HTML内容的简单弹出窗口不受影响.

JavaScript的:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

Answer 9

在最新版本的 bootstrap 4.6 上，您可能还需要用于sanitize:false添加复杂的 html。

$('.popover-with-html').popover({ html : true, sanitize : false })

Answer 10

对于 Bootstrap >= 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/#options