Over a million developers have joined DZone.

Follow Up Post: Hiding All But The Current Bootstrap Popover

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Last year around this same time, I published a blog post about a technique I developed for creating multiple Twitter Bootstrap popovers.  I came up with the technique while building a page containing several icons that, when hovered over with the mouse, would display different Bootstrap popovers with explanatory text and HTML.

The other day, a commenter on the original post asked how he could use my technique but ensure that only one popover was open at any given time (which I took to mean that on his page the popovers were triggered by a mouse click rather than a hover).  I gave him a brief, general idea of how to approach it (off the top of my head) but he wasn't clear on what I meant, so I decided to do a post on it.

First off, the options/API for configuring popovers in Bootstrap (currently Bootstrap version 2.3.2) have changed since last year.  Of particular note:

  • The default triggering event used to be hover...at least I assume so, since my original Javascript code didn't specify the triggering mechanism in the popover options.  The default trigger event is now the click event, with the possible options being "click", "hover", "focus", and "manual."

  • By default, the popover function will render the title and content of the popover as plain text:  any HTML markup included in either will be visible as text to the user and have no effect.  Specifically setting the "html" option to true will allow you to use markup in the title and content.  This change in the API was made to protect against cross-site scripting (XSS) attacks.

So solving the commenter's issue - making sure only one popover is displayed at any given time - means hiding all of the other popovers on the page:  if Popover A is opened via click, and then the user clicks on the DOM element that opens Popover B, Popover A needs to vanish. 

Unfortunately, the popover function doesn't provide a callback function:  if it did I could have used that to run the code that hides the other popovers.  So I needed to write code to manually handle the triggering of the current popover.

Using the Javascript code in my previous post as my starting point, and taking the API changes into account, here is the solution I came up with:

$(".pop").each(function() {
    var $pElem= $(this);
            html: true,
            trigger: 'manual',
            title: getPopTitle($pElem.attr("id")),
            content: getPopContent($pElem.attr("id"))
$(".pop").click(function() {
    var $pElem= $(this);
    $(".pop").each(function() {
        $currentPop= $(this);
        if($currentPop.prop("id") != $pElem.prop("id")) {
function getPopTitle(target) {
    return $("#" + target + "_content > div.popTitle").html();
function getPopContent(target) {
    return $("#" + target + "_content > div.popContent").html();

I still used the each() function to initialize each DOM element that triggers a popover (identified with the "pop" class), but I set the trigger option to "manual". Then I wrote a click event handler for those elements that would close all the other popovers before opening the popover for the DOM element the user clicked on.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Brian Swartzfager, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}