Bootstrap’s tooltip not working with knockout bindings ?

Bootstrap’s tooltip not working with knockout bindings ?

Asked on November 23, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

       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/

    Answered on November 23, 2018.
    Add Comment

       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>
    
    Answered on November 23, 2018.
    Add Comment

       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"
    }};
    
    Answered on November 23, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.