twitter bootstrap popover extension

draft_doowb_bootstrap_popoverex.md

Extending Twitter's Bootstrap Popover plugin

We had a goal of extending Twitter's Bootstrap popover plugin to allow us to easily add different css class to the popover to control the styling of the popover. The examples provided in this article show how to create the extension plugin and a way to use the extension to change the background color and add a border to the title.

First take a look at the css provided in popoverex.css.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.popover-info {
  border: 1px solid #b9d6b9;
}

.popover-info .popover-title {
  color: #0c7e9e;
  background-color: #dff3f6;
  border-bottom: 1px solid #b9d6d9;
}

Here we see a new class called .popover-info which modifies the overall border and gives a background color to the .popover-title class

Next take a look at the html provided in popoverex.html.

<h1>Popover Extension Example</h1>
<br />

<a href="#" class="btn btn-large btn-danger" 
            rel="popover" 
            data-modifier="popover-info" 
            title="A Title" 
            data-content="And here's some amazing content. It's very engaging, right?">Hover for popover</a>

The html has an anchor tag with default bootstrap classes to make it look like a large red button. It also has the rel attribute that we'll use later in the jQuery to setup the popovers. The data-content attribute is an option of the original popover plugin which provides the content that is shown when the popover is displayed. Finally, we are adding a new attribute called data-modifier which provides additional classes to be injected into the popover in our custom extension.

Finally, look at the popoverex.js file which provides the actual popover extension plugin.

(function($){
    var PopoverEx = function(element, options){
        this.init('popover', element, options);
    }
        
        PopoverEx.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {
        
            constructor: PopoverEx,
            tip: function(){
                if(!this.$tip){
                    this.$tip = $(this.options.template);
                    if(this.options.modifier) this.$tip.addClass(this.options.modifier);
                }
                return this.$tip; 
            }       
        });

    $.fn.popoverex = function(option){
        return this.each(function() {
            var $this = $(this)
                , data = $this.data('popover')
                , options = typeof option == 'object' && option;
            if(!data) $this.data('popover', (data = new PopoverEx(this, options)));
            if(typeof option == 'string') data[option]();
        });
    }
})(window.jQuery);

This plugin just extends the Bootstrap Popover plugin by extending the original constructor. The plugin then extends the tip method to add our modifier class if it exists in the options (which are either loaded from data attributes or passed in when initializing the plugin). After that, we register the new plugin (popoverex) with jQuery. This code is mostly taken from the original bootstrap popover plugin and modified to be used as an extension.

At the bottom of the popoverex.js file is the jQuery method that wires up the popover plugin based on the rel attributes.

jQuery(document).ready(function($) {
    $('[rel="popover"]').popoverex();
});

To see all the components together, please see this jsfiddle

popoverex.css

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.popover-info {
  border: 1px solid #b9d6b9;
}

.popover-info .popover-title {
  color: #0c7e9e;
  background-color: #dff3f6;
  border-bottom: 1px solid #b9d6d9;
}

popoverex.html

<h1>Popover Extension Example</h1>
<br />

<a href="#" class="btn btn-large btn-danger" rel="popover" data-modifier="popover-info" title="A Title" data-content="And here's some amazing content. It's very engaging, right?">Hover for popover</a>

popoverex.js

(function($){
    var PopoverEx = function(element, options){
        this.init('popover', element, options);
    }
        
        PopoverEx.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {
        
            constructor: PopoverEx,
            tip: function(){
                if(!this.$tip){
                    this.$tip = $(this.options.template);
                    if(this.options.modifier) this.$tip.addClass(this.options.modifier);
                }
                return this.$tip; 
            }       
        });

    $.fn.popoverex = function(option){
        return this.each(function() {
            var $this = $(this)
                , data = $this.data('popover')
                , options = typeof option == 'object' && option;
            if(!data) $this.data('popover', (data = new PopoverEx(this, options)));
            if(typeof option == 'string') data[option]();
        });
    }
})(window.jQuery);

jQuery(document).ready(function($) {
    $('[rel="popover"]').popoverex();
});