Post
Ask Question

Show Content In Kendo Tooltip Based On Text Length

Introduction

I already discussed the implementation of the Kendo ToolTip using jQuery in my last blog. In this blog, I’m going to discuss how to customize the Kendo ToolTip based on the requirement.

Kendo ToolTip

Consider a scenario where you need to customize the Kendo ToolTip visibility based on the length of the content, which means when the length of the text exceeds a certain limit, we need to enable the tooltip; otherwise we need to hide the tooltip.

KendoToolTip.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>      
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>  
  10.     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  
  11.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>  
  12. </head>  
  13. <body>  
  14.     
  15.     <div id="grid"></div>  
  16.     <style>  
  17.       #grid{  
  18.         width:300px;  
  19.       }  
  20.       .k-tooltip.k-popup{  
  21.         visibility: hidden;  
  22.       }  
  23.     </style>  
  24.     <script>  
  25.       var grid = null;  
  26.   
  27.       $(document).ready(function () {  
  28.         var dataSource = new kendo.data.DataSource({  
  29.           data: [  
  30.             {ID:1 ,Text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"},  
  31.             {ID:2 ,Text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "},  
  32.             {ID:3 ,Text: " Duis  "}  
  33.           ],  
  34.           schema: {  
  35.             model: {  
  36.               fields: {  
  37.                 ID: { type: "number" },  
  38.                 Text: { type: "string" }  
  39.               }}  
  40.           },  
  41.           
  42.         });  
  43.   
  44.         grid = $("#grid").kendoGrid({  
  45.           dataSource: dataSource,  
  46.           scrollable: true,  
  47.           filterable: true,  
  48.           toolbar: ["create"],  
  49.           columns: [  
  50.             { field: "ID", width: "50px" },  
  51.             { field: "Text", width: "200px", attributes: {  
  52.               style: 'white-space: nowrap '  
  53.             }  }],  
  54.           editable: "incell"  
  55.         }).data("kendoGrid");  
  56.   
  57.         $("#grid").kendoTooltip({  
  58.           show: function(e){  
  59.             if(this.content.text().length > 30){  
  60.               this.content.parent().css("visibility", "visible");  
  61.             }  
  62.           },  
  63.           hide:function(e){  
  64.             this.content.parent().css("visibility", "hidden");  
  65.           },  
  66.           filter: "td:nth-child(2)", //this filter selects the second column's cells  
  67.           position: "right",  
  68.           content: function(e){  
  69.             var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));  
  70.             var content = dataItem.Text;  
  71.             return content;  
  72.           }  
  73.         }).data("kendoTooltip");  
  74.       });  
  75.     </script>  
  76. </body>  
  77. </html>  

KendoToolTip object is used to initialize the kendo tooltip for the control where it is used. In that object, you can notice that the show function is defined with the condition like - if the text content exceeds more than 30 characters, the tooltip pop up should be visible. Otherwise, it should be hidden.

By default, the tooltip pop up is disabled using the style.

  1. .k-tooltip.k-popup{  
  2.       visibility: hidden;  
  3.     }  
 
 
From the result, you can notice that while the mouse hovers over the text in the first and second row, you will get a tooltip. For the third row text, you won’t get a tooltip because it has a text content that is less than 30 characters.
 
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed.