All of these answers miss a very important aspect!
By using .html or innerHtml or outerHtml you are not actually using the referenced element. You are using a copy of the element's html. This has some serious draw backs.
What you want to do is load the object itself into the popover.
https://jsfiddle.net/shrewmouse/ex6tuzm2/4/
HTML:
<h1> Test </h1>
<div><button id="target">click me</button></div>
<!-- This will be the contents of our popover -->
<div class='_content' id='blah'>
<h1>Extra Stuff</h1>
<input type='number' placeholder='number'/>
</div>
JQuery:
$(document).ready(function() {
// We don't want to see the popover contents until the user clicks the target.
// If you don't hide 'blah' first it will be visible outside of the popover.
//
$('#blah').hide();
// Initialize our popover
//
$('#target').popover({
content: $('#blah'), // set the content to be the 'blah' div
placement: 'bottom',
html: true
});
// The popover contents will not be set until the popover is shown. Since we don't
// want to see the popover when the page loads, we will show it then hide it.
//
$('#target').popover('show');
$('#target').popover('hide');
// Now that the popover's content is the 'blah' dive we can make it visisble again.
//
$('#blah').show();
});