Entries Tagged as 'Twitter Bootstrap'

Follow Up Post: Hiding All But The Current Bootstrap Popover

jQuery , Twitter Bootstrap 6 Comments »

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.

Read more...

Simple Technique For Creating Multiple Twitter Bootstrap Popovers

CSS , JavaScript , jQuery , Twitter Bootstrap , Web development 18 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).

Bootstrap Tip About Using Tabs and Modals Together

CSS , JavaScript , jQuery , Miscellaneous , Twitter Bootstrap , Web development 3 Comments »

I'm using Twitter Bootstrap on my current project at work, and I'm building a page that uses both the modal and tab JavaScript/jQuery plugins.  Both of those plugins working by employing a combination of specific HTML/CSS markup and JavaScript functions that interact with that markup.

I found out today that where you put the HTML for your modals could have an impact on how they function.  Originally, I had the HTML for the modal boxes related to the first tab on my page contained within the content <div> for that first tab, and the HTML for the modal box triggered by a link in the second tab within that tab's content <div>. The modals for the first tab worked fine, but when I triggered the modal for the second tab the page dimming effect occurred but the modal box wouldn't appear.

I did some experimenting and discovered that if I moved the HTML for all of the modals outside of the markup that made up the tab interface, all of the modals would then work correctly.

Given that the modals were triggered by id-based jQuery selectors, I have no idea why having the modal HTML inside of the tab content made a difference. I can only assume it has something to do with how the content related to each tab is affected by the tab plugin.