如何将img添加到popover bootstrap中

Question

这是我的代码

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="Some content">
     CLICK HERE
</a>

<script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
        });
</script>

这是结果集

我的问题是如何更改img的“部分内容”？

由于

Answer 1

您需要将data-html =“true”添加到您的标记中：

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="Some content" data-html="true">
 CLICK HERE
</a>

现在更改您的数据内容以包含您的html：

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="<img src='pathtoimage' />" data-html="true">
 CLICK HERE
</a>

确保在img标记中为图像添加正确的路径。

Answer 2

你应该使用像html或模板这样的popovers＆＃39;选项。这些设置允许您根据需要设计弹出窗口，例如：

HTML：

<div class="bs-example bs-example-padded-bottom"> 
     <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover">
          Click to toggle popover
     </button> 
</div>

JS：

$(document).ready(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    title: function () {
        return 'title';
    },
    content: function () {
        return '<p>Some image</p><img src="/images/someimage.jpg"></img>';
    }
  });
});