Kendo DropDownList Tooltip on focus

Question

有没有办法在focus上的Kendo DropDownList上显示工具提示？悬停有效，单击有效，但焦点无效。我想实现DropDownList的Bootstrap popover，但是Kendo Tooltip好像也不起作用。

<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

编辑： 我想知道，为什么焦点方法不起作用。 DropDownList 的选项是否不受支持？

Answer 1

手动显示：

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();
});

Demo

更新：

更好的是，在 wrapper 而不是 .k-input 中创建工具提示：

$("#myInput")
  .kendoDropDownList({})
  .data("kendoDropDownList")
  .wrapper
  .kendoTooltip({ 
    content: 'tooltip tooltip tooltip', 
    showOn: 'mouseenter click focus'
  });

Updated Demo