Dropdown list displays two tooltips at once

[Sterling]

Hi,

 

I'm working with an older version of kendo elements. Currently I'm struggling with an tooltip. My Dropdown List shows additional information. However, when the selection changes, the old and new tooltip is displayed. Attached I have three screemshots, additional information (showing the first display of the tooltip), default tooltip (when there is no additional information) and additional information and default tooltip (after the defautl is displayed and a new item is selected). How can I make it to show only the current tooltip?

Here is my code for the tooltip:

$("#myElement").change(function(){
    $("#myElement").kendoTooltip({
         filter: ".k-input",
	 position: "top",
	 showAfter: 500,
	 content: function(e){
	     const dropdownlist = $("#myDdl").data("kendoDropDownList");
	     const selectedItem = dropdownlist.dataItem();
	     if (selectedItem.field2 === undefined) {
	         selectedItem.field2 = "This is the default tooltip";
	     }
	     const result = $("<div style='text-align: center';></div>").text(selectedItem.field2).css("width", 
                            (selectedItem.field2.length * .6) + "em");
	     return result;
         }
    }).data("kendoTooltip");
});

[Neli]

Hi Sterling,

A possible approach is to refresh the Tooltip when the selection in the DropDownList has been changed:

 select: function(e){
            var text = e.item.text();
            console.log(text)
            setTimeout(function () {
              var tooltip = $('#myElement').data("kendoTooltip");
              tooltip.refresh();
            })
 },

Here you will find a Dojo example based on the provided snippet where the approach described above is implemented.

I hope you will find the provided suggestion helpful.

Regards,
Neli
Progress Telerik