Simple Technique For Creating Multiple Twitter Bootstrap Popovers

CSS , JavaScript , jQuery , Twitter Bootstrap , Web development Add comments

One of the JavaScript/jQuery plugins that comes with Twitter Bootstrap is the Popover plugin, which lets you create windows of content that appear when you hover over or focus on a DOM element.  They behave like tool tips but are larger and better suited to support styled content.

popover example

As noted in the documentation, the title and content of an individual popover can be coded in one of three ways:  via HTML attributes within the DOM element that triggers the popover, by assiging text values to the title and content properties when applying popover functionality to the DOM element, or by assigning functions that return markup to those title and content properties.  Here's an example of the last of those options:

$("#pop1".popover(
    {
        title: getPopTitle(),
        content: getPopContent()
    }
);

function getPopTitle() {
    return "Title 1";
};
		
function getPopContent() {
    return "Content 1";
}

The page I was working on needed to have several popovers, and the popover content included styled text: paragraphs, bolded text, etc. I didn't want to have to put that content into HTML attributes or long string values, nor did I want to code several different invocations of the popover function.

So what I decided to do was to create hidden blocks of HTML to hold the popover content and associate each set of "content" (title and content) with a unique id:

<style>
    .popSourceBlock {
        display:none;
    }
</style>

<div id="pop1_content" class="popSourceBlock">
    <div class="popTitle">
        Title 1
    </div>
    <div class="popContent">
        <p>This is the content for the <strong>first</strong> popover.</p>
    </div>
</div>

<div id="pop2_content" class="popSourceBlock">
    <div class="popTitle">
        Title 2
    </div>
    <div class="popContent">
        <p>This is the content for the <strong>second</strong> popover.</p>
    </div>
</div>


Then I assigned ids to the DOM objects that would trigger the popups when hovered over and gave them a CSS class of "pop". I opted to use one of the icons provide by Bootstrap to trigger the various popovers:

<i id="pop1" class="icon-question-sign pop"></i>
...
<i id="pop2" class="icon-question-sign pop"></i>


Finally, I used jQuery's each() function to loop through all the DOM elements with a class of "pop", grab the id value and use that to locate the matching content to associate with each popover:

$(".pop").each(function() {
    var $pElem= $(this);
    $pElem.popover(
        {
          title: getPopTitle($pElem.attr("id")),
          content: getPopContent($pElem.attr("id"))
        }
    );
});
				
function getPopTitle(target) {
    return $("#" + target + "_content > div.popTitle").html();
};
		
function getPopContent(target) {
    return $("#" + target + "_content > div.popContent").html();
};

With this code in place, I can add new popovers by creating additional hidden HTML blocks and DOM elements with the "pop" CSS class and an id that follows the pattern I've established.

Another nice aspect to this is that, down the road, I could put the page with the HTML blocks in a directory where a web designer or even a client with some basic HTML skills could edit the content, and I could call that file into my page programmatically. So long as they didn't add new content blocks, they could tweak the wording of the content without having to call me to do it (assuming I can trust them not to mess up the HTML formatting).

18 responses to “Simple Technique For Creating Multiple Twitter Bootstrap Popovers”

  1. Joe Says:
    Can you give an example of what you describe, just a link to the actual page would be great. Thanks.
  2. Kevin Says:
    Exactly what I was trying to do! Thanks for saving me a few hrs hacking on this javascript.
  3. Srinivas Reddy Says:
    Hi Brian, thanks a lot. It saves my day and of course life.
  4. Thiago Reis Says:
    Hi Brian, thanks a lot. Worked perfectly. :)
  5. shardulsingh Says:
    Saved my time, thanks for the great share.
  6. Victor Kurauchi Says:
    Thanks for saving my work Brian!
  7. Olivier Florentin Says:
    Thanks Brian. Excellent post.
  8. Tracy Says:
    Good grief - problem with content not displaying in my bootstrap.css file. Reloaded this and everything worked - please disregard my prior post.
  9. Erick Riva Says:
    I need the reverse effect, need only one popover open, there can be two at the same time. Can you do that for me?
  10. Brian Swartzfager Says:
    @Erick: Looking at the popover options in the current version of Bootstrap (the options and settings for popovers have changed since I wrote this post), it looks like your best bet is to manually control the appearance of the popovers using the popover('show') and popover('hide') commands. You would write your own click event for your popovers and you would start the event by hiding all other popovers on the page before displaying the selected/current popover.
  11. Erick Riva Says:
    @Brian: Can give me a example to do this?
    Sorry for my bad (Google Translate) English.
  12. Brian Swartzfager Says:
    @Erick: I've written a new blog post on how to close the other popovers when the user opens a new popover. URL: http://www.thoughtdelimited.org/thoughts/post.cfm/follow-up-post-hiding-all-but-the-current-bootstrap-popover
  13. Erick Riva Says:
    @Brian: thank you, very much!
  14. Yousof Says:
    Hi,
    what it that hard to have a demo of what you did?
    please do that.
  15. Brian Swartzfager Says:
    @Yousof: A demo of my technique isn't going to look/visually behave any differently from a generic implementation of Bootstrap popovers, so I don't quite see the point.
  16. coolhandchollette Says:
    This was a lifesaver man. Brews are on me!
  17. rael Says:
    Thanks very much. You saved me many hours
  18. Jaken Says:
    You saved my life, thank you thank you thank you!!!

Leave a Reply