0

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

Raptor
  • 392
  • 1
  • 4
  • 21

1 Answers1

0

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.

Roy J
  • 42,522
  • 10
  • 78
  • 102
  • Yes, you are right, just found it too. DropDown binding creates more complex control and tooltip must be attached to "wrapper" object in created control. So it is not possible to use 2 bindings. So one solution is wrap original input as you posted and another way is dynamic create tooltip after DropDown is rendered. – Raptor Sep 12 '17 at 11:36