Kendo tooltip for Textbox/Dropdown List/Grid having character limitation

3 min readMar 7, 2024

Let us assume we have an existing.NET MVC application using Kendo UI where we can’t change the control size for a better UI experience. So we need to display a tooltip if the control has more content compared to the control width.

Here, we need to consider the following scenarios:

Let us assume the control has more text data compared to its size, so an ellipse or a three-dot will display. If the user focuses on control, then a tooltip will display.
If the control has less text content, then the tooltip will not be shown.
If the control has no content, then the tooltip will not be shown.
If the user edits then based on the content, the tooltip will be updated.

tooltip for KendoTextbox with character limitation

Sample code

You can try this https://dojo.telerik.com/@mabhishekit/UnUSANeq/2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>tooltip for KendoTextbox having character limitation</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.0/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
</head>
<body>
  
    <style>
      .tooltip{
        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      [role="tooltip"]{
        visibility: hidden;
      }
    </style>
    <div id="tooltip">
      <table>
        <tr>
          <td>short text</td>
        </tr>
        <tr>
          <td><input type="text" value="very very long text very very long text very very long text very very long text" class="tooltip" id="txtbox"></td>
        </tr>
      </table>
    </div>
    <script>
      
      function tooltipForTextboxHavingCharacterLimitation(tooltipId, textboxId)
      {
          $(tooltipId).kendoTooltip({
            filter: "input",
            show: function(e){
              $('[role="tooltip"]').css("visibility", "hidden");
              if (this.content.text().length > 0) {
                $('[role="tooltip"]').css("visibility", "visible");
              },
            hide: function(){
              $('[role="tooltip"]').css("visibility", "hidden");
            },
            content: function(e){
              var element = e.target[0];             
              if(element.offsetWidth < element.scrollWidth){
                return $(textboxId).val();
              }else{
                return "";
              }          
            }
          }); 
        
        
          //Refresh the tooltip data while editing the textbox.
          $(textboxId)
          .keyup(refreshTooltip)
          .keypress(refreshTooltip)
          .blur(refreshTooltip)
          .change(refreshTooltip);


         function refreshTooltip()
         {
            $(tooltipId).data("kendoTooltip").refresh();
         }
      }
      
      tooltipForTextboxHavingCharacterLimitation('#tooltip','#txtbox');
      
      
    </script>
</body>
</html>

Let us discuss the following properties of the Kendo tooltip:

filter as per name which filter child element inside tooltip.

filter: "input"

2. If the tooltip has content, then only it’ll be shown.

show: function(e){
              $('[role="tooltip"]').css("visibility", "hidden");
              if (this.content.text().length > 0) {
                $('[role="tooltip"]').css("visibility", "visible");
              }

3. If input control offset width is less than scroll width i.e. if control size is less than the content size then only set the tooltip’s content field. Making this condition avoid tooltip to display if content size is less than textbox width.

content: function(e){
              var element = e.target[0];             
              if(element.offsetWidth < element.scrollWidth){
                return $(textboxId).val();
              }else{
                return "";
              }          
            }

We need to update the tooltip while editing the textbox.

//Refresh the tooltip data while editing the textbox.
$(textboxId)
.keyup(refreshTooltip)
.keypress(refreshTooltip)
.blur(refreshTooltip)
.change(refreshTooltip);


function refreshTooltip()
{
  $(tooltipId).data("kendoTooltip").refresh();
}

Please check the following implementation for grid and dropdown list control.

Kendo Grid