CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapglyphicons
chuckd
chuckd

Reputation: 14580

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

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"

Upvotes: 2

Views: 1995

Answers (2)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

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..

Upvotes: 3

Gerard
Gerard

Reputation: 15796

Try using single quotes around the glyphicon code:

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

Upvotes: -2

Related Questions