Can I get the current twitter bootstrap popover status?

Question

I am currently invoking a script to dynamically add content to my popover, but I do not need to make this call when the user clicks again to close it. Is it possible to get the state and close it when it is 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

Hidden and visible events are available by default in bootstrap popover.

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

The following events are available for loading bootprap

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

See the bootstrap popovers docs for more details .

Answer 4

Bootstrap adds and removes markup for 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 switch your example using the big red button displayed where it says: “Click to switch popover”

This jquery selector is written to select this popover element if it exists $ ('# Popovers'). Find ('h3'). Equation (5) .next (). Find ('popover')

To check its state (exists or not), check if the length of the set of returned elements is 0.

So, click the button to switch your example, and then run the following in the console:

TOGETHER TO POP ON

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

TRACK THE SURE.

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

PS - I hope you write the best selector, since you already know that you will need to check that the popover exists on the page or not.

EDIT: jsfiddle link HERE

Answer 5

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

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