Knockout binding handler: tooltip

tooltip.html

<script type="text/javascript">
    ko.bindingHandlers.tooltip = {
        normalize: function (valueAccessor) {
            var value = ko.unwrap(valueAccessor());
            if (typeof value === "object" && "data" in value) {
                return value;
            } else {
                return { data: value };
            }
        },
        
        getOptions: function (element, valueAccessor) {
            var value = ko.bindingHandlers.tooltip.normalize(valueAccessor);
            return $.extend({}, ko.unwrap(value.options), {
                items: element,
                content: ko.unwrap(value.data)
            });
        },
        
        init: function (element, valueAccessor) {
            var options = ko.bindingHandlers.tooltip.getOptions(element, valueAccessor);
            $(element).tooltip(options);
        },
        
        update: function (element, valueAccessor) {
            var options = ko.bindingHandlers.tooltip.getOptions(element, valueAccessor);
            $(element).tooltip("option", options);
        }
    };
</script>

<div data-bind="tooltip: 'Hypertext Markup Language'">HTML</div>
<div data-bind="
    tooltip: {
        data: now().toLocaleTimeString(),
        options: { track: true }
    }">
    Time
</div>

<script type="text/javascript">
    function ViewModel() {
        var self = this;
        self.now = ko.observable(new Date());
        setInterval(function () {
            self.now(new Date());
        }, 1000);
    }
    
    ko.applyBindings(new ViewModel());
</script>