Knockout JS Tool Tip Demo

Knockout JS Tool Tip Demo

by Shrikrishna Gupta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<div>

    <div style="max-height: 105px;" data-bind="foreach: selectedItems">

        <span data-bind="text: name, id: id, assignToolTip: id"></span>

        <input data-bind="value: name, valueUpdate: 'keyup', assignAutoComplete: { rootVm: $root }" type="email" value="" />
    </div>

</div>

JavaScript

var SelectedItem = function(obj){
    var self = this;
    self.name = ko.observable(obj.name);
    self.id = ko.observable(obj.id);
    self.tooltipText = ko.computed(function(){
        return "<ul><li>" + self.name() + "</li><li>" + self.id() + "</li></ul>";
    });
    return self;
};

    var MyViewModel = function () {
        var self = this;
        self.selectedItems = ko.observableArray(
            [new SelectedItem({ name: "eww", id: "ww" }),
                new SelectedItem({ name: "aa", id: "vv" }),
                new SelectedItem({ name: "xx", id: "zz" })]);
        return self;
    };

    ko.bindingHandlers.assignToolTip = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            if ($(element) != undefined) {                
                var currentDataItem = ko.dataFor(element);
                $(element).tooltip({
                    items: 'span',
                    track: true,
                    content: function () {
                        return currentDataItem.tooltipText();
                    }
                });
            }
        },
        update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){            
            if ($(element) != undefined) {                
                $(element).tooltip( "destroy" );
                var currentDataItem = ko.dataFor(element);
                $(element).tooltip({
                    items: 'span',
                    track: true,
                    content: function () {
                        return currentDataItem.tooltipText();
                    }
                });
            }
        }
    };

    ko.bindingHandlers.assignAutoComplete = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            if ($(element) != undefined) {
                $(element).autocomplete({
                    source: function (request, response) {
    ...