Over a million developers have joined DZone.

Follow Up Post: Hiding All But The Current Bootstrap Popover

DZone's Guide to

Follow Up Post: Hiding All But The Current Bootstrap Popover

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}