Is there any way how to show tooltip on Kendo DropDownList on focus? Hover works, click works but focus not. I want to implement Bootstrap popover to DropDownList, but it seems that Kendo Tooltip doesn't work too.
<input id="myInput" class="k-group" />
$("#myInput").kendoDropDownList({}).data("kendoDropDownList").wrapper.find(".k-input").kendoTooltip({
content: 'tooltip tooltip tooltip',
showOn: 'focus' // DOESN'T WORK
//showOn: 'mouseenter' // Works fine
//showOn: 'click' // Works fine
});
https://codepen.io/raptor/pen/ZXzOwQ
EDIT: I want to know, why focus method doesn't work. Is it unsupported option for DropDownList?
Show it manually:
var e = $("#myInput")
.kendoDropDownList({})
.data("kendoDropDownList")
.wrapper
.find(".k-input")
.kendoTooltip({
content: 'tooltip tooltip tooltip',
showOn: 'mouseenter click'
});
e.closest(".k-widget").on("focus", function() {
$(this).find(".k-input").data("kendoTooltip").show();
});
UPDATE:
Better yet, create the tooltip in the wrapper
instead of .k-input
:
$("#myInput")
.kendoDropDownList({})
.data("kendoDropDownList")
.wrapper
.kendoTooltip({
content: 'tooltip tooltip tooltip',
showOn: 'mouseenter click focus'
});