javascript - Kendo DropDownList Tooltip on focus

Question

有什么方法可以在 Kendo DropDownList 上显示工具提示吗？悬停有效，单击有效，但焦点无效。我想将 Bootstrap 弹出窗口实现到 DropDownList，但似乎 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();
});

演示

更新：

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

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

更新的演示