Bootstrap 3 Popover Content Fun

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="hidden" id="foobar">
    <div id="test">
        <b>TEST</b>
    </div>
</div>

<div class="container-fluid">
    <a role="button" tabindex="1" id="btn-showpo1" class="btn btn-lg btn-primary">$('#foobar').html()</a>
    <a role="button" tabindex="2" id="btn-showpo2" class="btn btn-lg btn-primary">$('#foobar').clone()</a>
    <a role="button" tabindex="3" id="btn-showpo3" class="btn btn-lg btn-primary">$('#foobar')</a>
</div>

CSS

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');

JavaScript

$('#btn-showpo1').popover({
    html: true,
    content: $('#foobar').html(),
    placement: 'bottom',
    trigger: 'focus'
});

$('#btn-showpo2').popover({
    html: true,
    content: $('#foobar > div').clone(),
    placement: 'bottom',
    trigger: 'focus'
});

$('#btn-showpo3').popover({
    html: true,
    content: $('#foobar > div'),
    placement: 'bottom',
    trigger: 'focus'
});