javascriptkendo-uikendo-dropdownkendo-tooltip

Kendo DropDownList Tooltip on focus


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?


Solution

  • 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