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.