Instead of adding one event handler per cell, you could add a single event handler on the cells container. Given the markup
<div class="cell-container" data-bind="tooltipContainer: true">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</diV>
you could use this binding:
ko.bindingHandlers.tooltipContainer = {
init: function (element, valueAccessor) {
$(element).on('hover', '.cell', function() {
$(this).tooltip();
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).tooltip("destroy");
});
}
};
If you want to add a timeout on top, this
ko.bindingHandlers.tooltipContainer = {
init: function (element, valueAccessor) {
$(element).on('hover', '.cell', function() {
var $this = $(this),
callback = function() { $this.tooltip(); };
setTimeout(callback, 2000);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).tooltip("destroy");
});
}
};
should work.