I want to create a custom binding to merge Kendo DropDownList and Kendo Tooltip. So I made this:
ko.bindingHandlers.kendoDropDownListWithTooltip =
{
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var local = ko.utils.unwrapObservable(valueAccessor());
// INIT DropDown
ko.bindingHandlers.kendoDropDownList.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
var combo = $(element).data().kendoDropDownList;
// INIT Tooltip
if (combo) {
var tooltipConfig = local.tooltip;
var newValueAccessor = function () { return tooltipConfig; };
ko.bindingHandlers.kendoTooltip.init(combo.wrapper, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
}
}
};
But it doesn't work as expected. I need to display tooltip when DropDownList is focused only. When Dropdown is not focused, tooltip must be hidden.
<input data-bind="kendoDropDownListWithTooltip: { data: choices, value: selectedChoice, tooltip: { showOn: 'focus', position: 'right', content: 'Tootlip Tooltip Tooltip' } }" />
But moving to other dropdows keeps all controls focused. Why and how to fix it?
https://codepen.io/raptor/pen/xXGPmK
UPDATE Seems to be some bug in Kendo itself. Example without Knockout, just kendo controls. The same problem. https://codepen.io/raptor/pen/RLPxZj