How to put a glyphicon inside the bootstrap popover content in jquery

Question

I want to include a glyphicon next to the content of my popover and it will be done dynamically in jquery. But when I add the span tags for the glyphicon, it shows the html string when the popover is displayed. It doesn't translate it to 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" );

The content ends up looking like this in the popover

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

Answer 1

As Per Bootstrap Docs, if you need to set data-content dynamically then it should not be specified as a attribute.

Try This,

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

Hope this Helps..