How to check whether a twitter bootstrap popover is visible or not?

Question

I have an element $('#anElement') with a potential popover attached, like

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div> 

I just would like to know how to check whether the popover is visible or not: how this can be accomplished with jQuery?

Answer 1

If this functionality is not built into the framework you are using (it's no longer twitter bootstrap, just bootstrap), then you'll have to inspect the HTML that is generated/modified to create this feature of bootstrap.

Take a look at the popupver documentation. There is a button there that you can use to see it in action. This is a great place to inspect the HTML elements that are at work behind the scene.

Crack open your chrome developers tools or firebug (of firefox) and take a look at what it happening. It looks like there is simply a <div> being inserted after the button -

<div class="popover fade right in" style="... /> 

All you would have to do is check for the existence of that element. Depending on how your markup is written, you could use something like this -

if ($("#popoverTrigger").next('div.popover:visible').length){   // popover is visible } 

#popoverTrigger is the element that triggered that popover to appear in the first place and as we noticed above, bootstrap simply appends the popover div after the element.

Answer 2

There is no method implemented explicitly in the boostrap popover plugin so you need to find a way around that. Here's a hack that will return true or false wheter the plugin is visible or not.

var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in'); console.log(isVisible); // true or false 

It accesses the data stored by the popover plugin which is in fact a Popover object, calls the object's tip() method which is responsible for fetching the tip element, and then checks if the element returned has the class in, which is indicative that the popover attached to that element is visible.

---

You should also check if there is a popover attached to make sure you can call the tip() method:

if ($('#anElement').data('bs.popover') instanceof Popover) {   // do your popover visibility check here }