tooltip

by goldfingerxyz

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<input data-bind="value: first, tooltip: { title: firstHelp, placement: 'bottom' }" />

<input data-bind="value: last, tooltip: { title: lastHelp }" />

JavaScript

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: "hover"
    }
};

ko.applyBindings({
    first: ko.observable("Bob"),
    firstHelp: ko.observable("Enter a first name"),
    last: ko.observable("Smith"),
    lastHelp: ko.observable("Enter a last name")
                 
});