tooltip

This is an attempt at getting Bootstrap tooltips working with rendering from a dynamic Knockout template.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<a data-bind="tooltip: { html: tooltipHtml,
                         options: {placement: 'bottom'} }">Hover on me</a>

<br/>
<br/>
<br/>
<a href="#" data-bind="click: changeTooltip">Change tooltip data</a>

JavaScript

ko.bindingHandlers.tooltip = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var settings = ko.utils.unwrapObservable(valueAccessor()),
            options = {};

        ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
        ko.utils.extend(options, settings.options);

        $(element).tooltip(options);

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var settings = ko.utils.unwrapObservable(valueAccessor());
        $(element).data('bs.tooltip').options.title = ko.utils.unwrapObservable(settings.html);
    },
    options: {
        placement: "top",
        trigger: "hover",
        html: true
    }
};

var vm = {
    firstName: ko.observable('Initial Name'),
    address: ko.observable('55 Walnut Street, #3'),
    changeTooltip: function () {
        this.firstName('New Name');
    }
};

vm.tooltipHtml = ko.computed(function () {
    return "<h2>" + vm.firstName() + "</h2>" +
        "<span>" + vm.address() + "</span>";
});

ko.applyBindings(vm);