Bootstrap popover with knockout.js

    Use the   custom dataBinding method for the bootstrap popover.

Try this code :

ko.bindingHandlers.bootstrapPopover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        var defaultOptions = {}; 
        options = $.extend(true, {}, defaultOptions, options);
        $(element).popover(options);
    }
};
var viewModel = {
    items: ko.observableArray([{
        "id": 1,
        "title": "title-1",
        "info": "info-1"},
{
         "id": 2,
         "title": "title-2",
         "info": "info-2"},
{
          "id": 3,
          "title": "title-3",
          "info": "info-3"}])
}
ko.applyBindings(viewModel);​

And in the  html :

<div class="container">
    <div class="hero-unit"> 
        <table class="table table-condensed" data-bind="foreach: items">
            <tr>
                <td><b data-bind="text: $data.id"></b></td>
                <td data-bind="text: $data.title"></td>
                <td><a href="#" data-bind="bootstrapPopover : {content : $data.info }">Info</a></td>
            </tr>
        </table>
    </div>
</div>​

Try this answer for popover the element :

    The docs is showing the opposite for d\some user . In fact, The statement is the opposite . Namely, Twitter Bootstrap is not start the popovers automatically or tooltips on a page.  From the docs

  By the new  bootstrap documentation , The implicit call of  $(‘.popover’).popover()  is not needed , Although this is not work .

    For improving the performance, The Tooltip and Popover data-apis are opt in.For using this , Mention  a selector option.

    For this  “opt in”,   use this  Popover object to an element which had every popovers and visible on the page. 

    Try this code for doing this :

$('body').popover({selector: '[rel="popover"]'});

    Form 2.1 , Clicking the default is easy , Without any performances problem . Even so , If  an element is find farther down the DOM than body to which to attach the Popover object , Which is chosen always . However, Based on where the user showing  the AJAX content , Body might be their best bet.

    This performance believing is coming  from the 2.1 prior fact , This  Popover plugin was by default triggered by mouseenter and mouseleave events, which is not required for processing for an entire page.

    See this example with more collection of objects, The ko.applyBindings() is change to ko.applyBindingsToDescendants to  add the binding context $root and $parent during associate a button for example to a function in a root viewModel .

$(element).click(function() {
        $(this).popover('toggle');
        var thePopover = document.getElementById(attribute.id+"-popover");
        childBindingContext = bindingContext.createChildContext(viewModel);
        ko.applyBindingsToDescendants(childBindingContext, thePopover);
    });