Gombo Gombo -4 years ago 173
Javascript Question

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

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download