jquery - 如何在 jquery 的 bootstrap popover 内容中放置一个字形图标

Question

我想在弹出窗口的内容旁边包含一个字形图标，它将在 jquery 中动态完成。 但是当我为字形图标添加 span 标签时，它会在显示弹出窗口时显示 html 字符串。它不会将其翻译成 html

$(this).attr("data-content", "<span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"></span>You can't unlist if you have upcoming events scheduled" );

内容最终在弹出窗口中看起来像这样

"<span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"></span>You can't unlist if you have upcoming events scheduled"

Answer 1

根据 Bootstrap 文档，如果您需要动态设置 data-content，则不应将其指定为属性。

试试这个，

HTML

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header">Toggle popover</a>
</div>

JS

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
    html:true,
    content:function(){
    return ("<span class='glyphicon glyphicon-user'>Hello</span>");
    },
    });   
});

Working Fiddle

希望这有帮助..