Bootstrap 3 Popover Trigger 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">
        TEST
    </div>
</div>

<div class="container-fluid">
 <button type="button" id="btn-help" class="btn btn-lg btn-success">HELP</button>
<button type="button" id="btn-show-popover-bug" class="btn btn-lg btn-success" data-toggle="popover" data-content="TEST" data-placement="bottom">SHOW (TRIGGER: CLICK)</button>
    <button type="button" id="btn-show-popover-nobug" class="btn btn-lg btn-success" data-toggle="popover" data-content="TEST" data-placement="bottom" data-trigger='manual'>SHOW (TRIGGER: MANUAL)</button>
    <button type="button" id="btn-hide-popover" class="btn btn-lg btn-danger">HIDE</button>
</div>

CSS

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

JavaScript

$('[data-toggle="popover"]').popover(); // unnecessary for the manually triggered one I guess?

$('#btn-show-popover-nobug').click(function () {
    $(this).popover('toggle');
});


$('#btn-show-popover-nobug').click(function () {
    $(this).popover('toggle');
});

$('#btn-hide-popover').click(function () {
    $('#btn-show-popover-bug').popover('hide');
    $('#btn-show-popover-nobug').popover('hide');
});