Kendo DropDownList Tooltip on focus

Question

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?

Answer 1

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

Demo

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

Updated Demo