knockout.jskendo-dropdownknockout-kendokendo-tooltip

Knockout-Kendo: DropDown with Tooltip doesn't work


I'm using Knockout-Kendo bindings.

I need to use DropDownList with Tooltip, but using both bindings in one control doesn't work. Anyone knows why and how to fix it?

var ViewModel = function() 
{
   this.choices = ko.observableArray(["apple", "orange", "banana"]);
   this.selectedChoice = ko.observable();
   this.tipText = "I am a tooltip!";
};

ko.applyBindings(new ViewModel());

<input 
    data-bind="kendoDropDownList: { data: choices, value: selectedChoice }, 
               kendoTooltip: { content: tipText }" />

https://codepen.io/raptor/pen/dVbrPM


Solution

  • To fix, wrap it in a span and put the tooltip on the span.

    <span data-bind="kendoTooltip: { content: tipText }"><input data-bind="kendoDropDownList: { data: choices, value: selectedChoice }" /></span>
    

    As for why, my guess is that Kendo proxies the input item, so your tooltip winds up being attached to the hidden "real" input, not the visible Kendo dropdown.