Bootstrap 3 Popover Trigger Fun

by Herst

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-show-popover-bug" class="btn btn-lg btn-success">SHOW (TRIGGER: CLICK</button>
    <button type="button" id="btn-show-popover-nobug" class="btn btn-lg btn-success">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

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

$('#btn-show-popover-nobug').popover({
    html: true,
    content: $('#foobar').html(),
    placement: 'bottom',
    trigger: 'manual'
}).click(function () {
    $(this).popover('toggle');
});

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