I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.
<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>
Best Answer
You cannot use
<li href="#"
since it belongs to<a href="#"
that's why it wasn't working, change it and it's all good.Here is working JSFiddle which shows you how to create bootstrap popover.
Relevant parts of the code is below:
HTML:
JavaScript:
And by the way, you always need at least
$("[data-toggle=popover]").popover();
to enable the popover. But in place ofdata-toggle="popover"
you can also useid="my-popover"
orclass="my-popover"
. Just remember to enable them using e.g:$("#my-popover").popover();
in those cases.Here is the link to the complete spec: Bootstrap Popover
Bonus:
If for some reason you don't like or cannot read content of a popup from the
data-content
andtitle
tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.