Bootstrap Popover Picker

Generic jQuery plugin template for building pickers using Bootstrap popovers, fully customizable with a powerful base API.

Source Code Download

Looking for a Font Awesome Icon Picker?

Demos

$('.pck-opts').picker({
    title: 'With custom options',
    items: [
        { type: 'heart', icon: '♥' }, { type: 'spades', icon: '♠' },
        { type: 'clubs', icon: '♣' }, { type: 'diamonds', icon: '♦' },
        { type: 'star', icon: '★' }, { type: 'smile', icon: '☺' },
        { type: 'sun', icon: '☼' }, {type: 'song', icon: '♫' },
    ],
    itemProperty: 'icon',
    selectedCustomClass: 'label label-success',
    mustAccept:true,
    placement:'bottomRight',
    showFooter:true,
    templates{
        search:false,
        //... (see the source code of this page)
    }
});


Note: In dropdowns the placement is controlled by the Bootstrap dropdown plugin

$('.picker-data').picker({
    title: "Choose a day of week",
    items: [ "Sunday", "Monday", "Tuesday",
             "Wednesday", "Thursday",
              "Friday", "Saturday"],
    placement: 'topRight',
    updateComponentOnChange: false,
    selectedCustomClass: 'btn-success demo-selected',
    pickerItemClass: "demo-item-class",
    component: '.input-group-btn',
    itemValueSelector: 'span',
    templates: {
        pickerItem: '<div class="demo-item-class">
                        <span></span>
                     </div>',
    }
});