Bootstrap popover only appearing once

Question

I'm trying to get my bootstrap popover to appear when the checkbox is "checked" but it only seems to work once. Ideally, I'd like for it to appear every time the checkbox is "checked", and then timeout after 5 seconds. I've been fiddling with this for hours and can't seem to get it to work correctly.

Here is my markup:

<label><input type="checkbox"> Long long long label title </label>

Here is my JS:

$('label input').on('change', function() {

  if ( $('label input').is(':checked') ) {

  $('label').popover({
    placement: 'bottom',
    content: 'This is awesome popover content!.'
  }).on('shown.bs.popover', function() {
    setTimeout(function() {
    $('label').popover('hide');
    }, 5000);
  });

 }

});

Here is my fiddle:

link to my JS fiddle

Any advice is greatly appreciated. Thanks!!

Answer 1

What you need to do is initialize the popover on dom ready with manual trigger and then when then the checkbox is checked call the show function

$('label').popover({
    placement: 'bottom',
    content: 'This is awesome popover content!.',
    trigger: 'trigger'
}).on('shown.bs.popover', function (e) {
    setTimeout(function () {
        $(e.target).popover('hide');
    }, 5000);
});

$('label input').on('change', function () {
    if (this.checked) {
        $(this).parent().popover('show')
    }
});

Demo: Fiddle