Binding to Bootstrap popover. Supports custom templates with observables for popover content

Examples

Html markup

<button class="btn btn-primary" data-bind="popover: { 
        options: { title: 'Popover with template', placement: 'top' }, 
        template: popoverTemplate, 
        data: { text: 'First template' } 
    }">Click</button>

<button class="btn" data-bind="click: switchTemplates">Switch templates</button>

<button class="btn btn-primary" data-bind="popover: { 
        options: { title: 'Focus', content: 'Focus popover', trigger: 'focus', placement: 'bottom' } 
    }">Focus</button>

<button class="btn btn-primary" data-bind="popover: { 
        options: { title: 'Hover', content: 'Hover popover', trigger: 'hover' } 
    }">Hover</button>
        
<script type="text/html" id="firstPopoverTemplate">
    <button class="close pull-right" type="button" data-dismiss="popover">×</button>
    <p data-bind="text: text"></p>
</script>

<script type="text/html" id="secondPopoverTemplate">
    <p>Second template</p>
</script>

View model

function PopoverExampleViewModel() {
    var self = this;
    
    self.popoverTemplate = ko.observable('firstPopoverTemplate');
    self.switchTemplates = function() {
        self.popoverTemplate() === 'firstPopoverTemplate' 
                                    ? self.popoverTemplate('secondPopoverTemplate') 
                                    : self.popoverTemplate('firstPopoverTemplate');
    };
}

Options

All of the options can be observables, also option's object can be observable too

Short notation

If you don't need use template, you can use short notation of binding, which uses only option object.