I am trying to add a bootstrap popover to a div element that contains arbitrary content like so (but what I came up with doesn’t work):
<div id="popover-target">
<h3>I need a popover</h3>
<p>
This is some content for the section
that needs to be explained by the popover.
</p>
</div>
<button class="btn">Show popover</button>
<script>
$(function(){
$('.btn').click(function(){
$('#popover-target').popover({title: 'Title', content: 'Test Content', container: 'body', placement: 'right'});
});
});
</script>
If I change $('#popover-target') to $('.btn') then the popover displays correctly. Any ideas?
$(function(){
$('.btn').popover({
container: "body",
html: true,
content: function () {
return '<div class="popover-message">Hello</div>';
}
});
});
$('.btn').click(function(){
$('#btn').popover();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="popover-target">
<h3>I need a popover</h3>
<p>
This is some content for the section
that needs to be explained by the popover.
</p>
</div>
<button class="btn">Show popover</button>
You have just initialized the popover on button click which should work fine, if you hover over the #popover-target div after button click. If you want to show it after button click with hovering over it, you can use .popover('show') like:
$('.btn').click(function() {
$('#popover-target').popover({
trigger: 'hover',
title: 'Title',
content: 'Test Content',
placement: 'bottom'
})
.popover('show');
});