Show Tooltip on Selected Item in ComboBox
Environment
Product | Progress® Kendo UI® Tooltip for jQuery | Progress® Kendo UI® ComboBox for jQuery |
Operating System | All | |
Browser | All | |
Preferred Language | JavaScript |
Description
How can I show a tooltip on a selected item in the ComboBox?
Solution
- Subscribe to the
select
event of ComboBox. - In the event handler, check the text of the selected item.
- Destroy the Tooltip that was previously created.
- 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: {
type: "odata",
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/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>