Can I get the current state of a twitter bootstrap popover?

Question

I currently call a script to dynamically add content to my popover but I don't need to make this call when a user clicks again to close it. Is it possible to get the state and close it when it's visible?

This is what I have so far:

$('.knownissue').on('click', function() {

    var info = $(this).attr('id').substr(5).split(':');
    var el = $(this);

    // How do I check to see if the popover is visible
    // so I can simply close it and exit?

    $.post('functions/get_known_issues.php?tcid='+info[0]+'&tcdate=' + info[1], function(data) {
        if (data.st) {
            el.attr('data-content', data.issue);
            el.popover('toggle');
        }
    }, "json");

});

Answer 1

To avoid searching for dynamically inserted markup you can do this:

In Bootstrap 2:

var $element = $('.element-you-added-popup-to')
$element.data().popover.tip().hasClass('in')
// Or if you used '.tooltip()' instead of '.popover()'
$element.data().tooltip.tip().hasClass('in')

In Bootstrap 3:

$element.data()['bs.popover'].tip().hasClass('in')
$element.data()['bs.tooltip'].tip().hasClass('in')

Answer 2

if($('.popover').hasClass('in')){
  // popover is visable
} else {
  // popover is not visable
}

Answer 3

the hidden and shown events are available in bootstrap popover as default.

 $('#myPopover').on('shown.bs.popover', function () { // do something… })

The Following events for bootstrap popover are available

 show.bs.popover shown.bs.popover hide.bs.popover hidden.bs.popover

Please Refer to docs bootstrap popovers for more details

Answer 4

For Bootstrap 4.x

 $('a#aUeberschriftenJBi').click(function() {
    if ($('a#aUeberschriftenJBi').attr('aria-describedby')) {
        // popover is visable
    } else {
        // popover is not visable
        $('a#aUeberschriftenJBi').popover({
            placement: 'bottom',
            title: function() {
                return "Title";
            },
            content: function() {
                return "Content";
            }
        });
    }

    $('a#aUeberschriftenJBi').popover("show");
});

HTML

<a href="#" id="aUeberschriftenJBi" title=""><span><i class="fa fa-sticky-note"></i></span></a>

Answer 5

Bootstrap adds and removes the markup for the popover dynamically, so you just need to check for the existence of the element.

If you go to the Bootstrap example page: http://twitter.github.com/bootstrap/javascript.html#popovers , you can toggle their example popover with the large red button displayed there that says "Click to toggle popover"

This jquery selector is written to select that popover element if it exists $('#popovers').find('h3').eq(5).next().find('.popover')

To check it's state (exists or not), check if the length of returned element set is 0.

So push the button to toggle their popover example, then run the following in the console:

TOGGLE POPOVER ON

console.log( 
     $('#popovers').find('h3').eq(5).next().find('.popover').length === 0
); // false

TOGGLE POPOVER OFF

console.log( 
    $('#popovers').find('h3').eq(5).next().find('.popover').length === 0
); // true

PS - Hopefully you'll write a better selector since you already know you're going to need to check the popover exists on the page or not

EDIT : link to jsfiddle HERE

Answer 6

Try this

if ($('#elementId').attr('aria-describedby')) {
  alert('Popover is Visible');
  $("#elementId").popover('hide'); // To Hide Popover

}else{
  alert('Popover is Hidden');
  $("#elementId").popover('show'); // To Display Popover
}