Bootstrap's tooltip not working with knockout bindings? (w fiddle)

Question

Fiddle: http://jsfiddle.net/LkqTU/9399/

Code:

var ViewModel = function (first, last) {
    var self = this;
    self.showIcon = ko.observable(false)         


        

Answer 1

I also encountered some problems regarding the tooltip binding with knockout and the answer offered by RP Niemeyer helped me. But then, when I tried to bind to a function which returns the options object of the tooltip, that wasn't called (it has been called only once). So it was not working if I was trying to dynamically change the title of the tooltip, based on the mapped css classes. So, the solution I found 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"
}};

I wanted to make this remark here because I think it would be useful in those cases when the title of the tooltip has to be changed dynamically.