New to Kendo UI for jQueryStart a free 30-day trial

Show Tooltip on Selected Item in ComboBox

Environment

ProductProgress® Kendo UI® Tooltip for jQueryProgress® Kendo UI® ComboBox for jQuery
Operating SystemAll
BrowserAll
Preferred LanguageJavaScript

Description

How can I show a tooltip on a selected item in the ComboBox?

Solution

  1. Subscribe to the select event of ComboBox.
  2. In the event handler, check the text of the selected item.
  3. Destroy the Tooltip that was previously created.
  4. Create a Tooltip with the text of the selected item.
<input id="combobox" />
<script>      
    $("#combobox").kendoComboBox({
        placeholder: "Select product",
        dataTextField: "ProductName",
        dataValueField: "ProductID",   
      	 select: onSelect,
        dataSource: {
            transport: {
                read: {
                    url: "https://demos.telerik.com/service/v2/core/Products",
                }
            }
        }
    });

    $('.k-widget.k-combobox').kendoTooltip({  
	   		content: "No value selected"
	  });

    function onSelect(e){
     	var text = e.item.text();
     	$(".k-widget.k-combobox").data("kendoTooltip").destroy();    
     	$('.k-widget.k-combobox').kendoTooltip({  
     	   content: text  				
     	});
    }    
</script>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support