Question

有没有办法在焦点上显示Kendo DropDownList上的工具提示？悬停工作，点击工作但不关注。我想实现Bootstrap popover到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();
});

<德尔> Demo

<强>更新

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

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

Updated Demo

Kendo DropDownList焦点上的工具提示

1 个答案: