Post
Ask Question

Tooltip In Kendo Autocomplete

Introduction

Kendo autocomplete is the control that provides a suggestion based on the input given in a text box. In this blog, I’m going to explain how to implement a Kendo tooltip in the autocomplete control to show some additional information about a list item.

Kendo Autocomplete

Here is a simple demo to implement the Kendo autocomplete with static data source.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="https://demos.telerik.com/kendo-ui/autocomplete/index">  
  5.     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>  
  6.     <title></title>  
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />  
  10.   
  11.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>  
  12.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>  
  13.       
  14.   
  15. </head>  
  16. <body>  
  17.   
  18.         <div id="example">  
  19.             <div class="demo-section k-content">  
  20.                 <h4><label for="countries">Choose shipping countries:</label></h4>  
  21.                 <input id="countries" style="width: 25%;" />  
  22.                 
  23.             </div>  
  24.   
  25.             <script>  
  26.                
  27.                 
  28.                 $(document).ready(function () {  
  29.                     var data = [  
  30.     {  
  31.         "value": 1,  
  32.         "code" : "IND",  
  33.         "Desc": "India"  
  34.     },  
  35.     {  
  36.         "value": 2,  
  37.          "code":"SG",  
  38.         "Desc": "Singapore"  
  39.     },  
  40.     {  
  41.         "value": 3,  
  42.          "code":"UK",  
  43.         "Desc": "United Kingdom"  
  44.     }  
  45.       
  46.                       ]  
  47.   
  48.                     
  49.                     $("#countries").kendoAutoComplete({  
  50.                         dataSource: data,  
  51.                         dataTextField:"code",  
  52.                         dataValueField:"value",  
  53.                         filter: "startswith",  
  54.                         placeholder: "Select country...",  
  55.                         separator: ", "  
  56.                     });  
  57.                 });  
  58.             </script>  
  59.         </div>  
  60.   
  61.   
  62. </body>  
  63. </html>  
Result
 
Figure 1 

Kendo Autocomplete provides a country code suggestion based on the user entry in the text box. Now, let us make it more informative using tooltip.

Using a tooltip, now we are going to display the complete country name to the user, which makes it more informative.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="https://demos.telerik.com/kendo-ui/autocomplete/index">  
  5.     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>  
  6.     <title></title>  
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />  
  10.   
  11.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>  
  12.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>  
  13.       
  14.   
  15. </head>  
  16. <body>  
  17.   
  18.         <div id="example">  
  19.             <div class="demo-section k-content">  
  20.                 <h4><label for="countries">Choose shipping countries:</label></h4>  
  21.                 <input id="countries" style="width: 25%;" />  
  22.                 
  23.             </div>  
  24.   
  25.             <script>  
  26.                $('body').kendoTooltip({  
  27.                     filter: 'li.k-item',  
  28.                     position: 'right',  
  29.                     content: function(e){  
  30.                     var autoComplete=$('#countries').data('kendoAutoComplete')  
  31.                     var item = autoComplete.dataItem($(e.target));  
  32.   
  33.                     var result = '<h3>' + item.Desc + '</h3>' ;  
  34.                       
  35.                     return result;  
  36.                     },  
  37.                });  
  38.                 
  39.                 
  40.                 $(document).ready(function () {  
  41.                     var data = [  
  42.     {  
  43.         "value": 1,  
  44.         "code" : "IND",  
  45.         "Desc": "India"  
  46.     },  
  47.     {  
  48.         "value": 2,  
  49.          "code":"SG",  
  50.         "Desc": "Singapore"  
  51.     },  
  52.     {  
  53.         "value": 3,  
  54.          "code":"UK",  
  55.         "Desc": "United Kingdom"  
  56.     }  
  57.       
  58.                       ]  
  59.   
  60.                     //create AutoComplete UI component  
  61.                     $("#countries").kendoAutoComplete({  
  62.                         dataSource: data,  
  63.                         dataTextField:"code",  
  64.                         dataValueField:"value",  
  65.                         filter: "startswith",  
  66.                         placeholder: "Select country...",  
  67.                         separator: ", "  
  68.                     });  
  69.                 });  
  70.             </script>  
  71.         </div>  
  72.   
  73.   
  74. </body>  
  75. </html>  

From the above code, you can notice that the content of the tooltip will be the description of the country code from the data source with respect to the list item which the user selected. 

Result
 
Figure 2
 
I hope you have learned from this blog. Your valuable feedback, questions, or comments about this blog are always welcome.
Next Recommended Reading Show Content In Kendo Tooltip Based On Text Length