Bootstrap’s tooltip not working with knockout bindings ?

   Make a custom binding which is use to place the  tooltips anywhere in the markup.

   Here is one implementation of a tooltip binding:

ko.bindingHandlers.tooltip =
{
  init: function(element, valueAccessor)
{
    var local = ko.utils.unwrapObservable(valueAccessor()),
    options = {};
    ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
    ko.utils.extend(options, local);
    $(element).tooltip(options);
    ko.utils.domNodeDisposal.addDisposeCallback(element, function()
{
      $(element).tooltip("destroy");
    });
  },
  options:
{
    placement: "right",
    trigger: "click"
  }
};

   Then use the binding on the page like:

<input data-bind="value: name, tooltip: { title: help, trigger: 'hover' }" />

   Make choice globally and then override them with whatever  pass into the binding.

   When you get into templating and control-flow scenarios, Custom binding also work, because it will automatically get initialized at the right time without any manual work and  know when to call code.

   See this sample : http://jsfiddle.net/rniemeyer/BF5yW/

   On github , a small project namely called Knockout-Bootstrap for making “rich two way interactions with Bootstrap and Knockout bindings”.

   See this example for Knockout-Bootstrap.

   http://jsfiddle.net/qZkXP/

<div class='liveExample' data-bind="event: {mouseover: triggerIcon}">
  <!-- ko if: showIcon -->
  <a class="card-delete-button"
    data-bind="tooltip: {title: 'Another tooltip', placement: 'right'}">
      <i class="icon-trash"></i>
  </a>
  <!-- /ko -->
</div>

   When try to bind to a function which returns the choice object of the tooltip, that wasn’t called , So the code is not work when alter  the title of the tooltip, based on the mapped css classes. So, the solution is:

ko.bindingHandlers["tooltip"] =
{
'init': function (element, valueAccessor)
{
  var local = ko.utils.unwrapObservable(valueAccessor());
  var options = {};
  ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
  ko.utils.extend(options, local);
  $(element).tooltip(options);
  ko.utils.domNodeDisposal.addDisposeCallback(element, function ()
{
    $(element).tooltip("destroy");
  });
},
'update': function (element, valueAccessor)
{
  var local = ko.utils.unwrapObservable(valueAccessor());
  var options = {};
  ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
  ko.utils.extend(options, local);
  $(element).data("bs.tooltip").options.title = options.title;
},
options:
{
  placement: "top",
  trigger: "click"
}};