Refreshing Generic Textbox Tooltip and Suppressing Empty Tooltip Content

Updated on Jan 19, 2026

Environment

Product	Telerik UI for ASP.NET Core Tooltip
Version	2025.4.1217

Description

I want to create a generic tooltip for textboxes in a view and refresh the tooltip content dynamically to reflect changes to the textbox value. Additionally, I need a generic way to suppress the tooltip when the textbox content is empty.

This knowledge base article also answers the following questions:

• How to dynamically update Kendo UI ToolTip content for a textbox?
• How to suppress Kendo UI ToolTip when textbox content is empty?
• How to manage tooltip visibility for textboxes in Telerik UI for ASP.NET Core?

Solution

To achieve a dynamic refresh of the tooltip content and suppress it when the textbox content is empty, follow these steps:

1. Use the Show and Hide events for the Telerik UI for ASP.NET Core Tooltip.
2. Dynamically update the tooltip content based on the textbox value.
3. Apply CSS to hide the tooltip when the textbox value is empty.

Here is an example implementation:

csharp

@(Html.Kendo().Tooltip()
    .For("input[type='text']")
    .Position(TooltipPosition.Top)
    .Width(350)
    .Height(30)
    .Events(e => e.Show("ttOnShow").Hide("ttOnHide"))
)

javascript

function ttOnShow(e) {
    var targetInput = $(e.sender.target());
    var contentElement = e.sender.popup.element.find(".k-tooltip-content");

    $("input[type='text']").off("input.ttsync");

    var text = targetInput.val() || "";
    if (!text) {
        $(".k-tooltip").css("display", "none");
    }

    contentElement.text(text);

    targetInput.on("input.ttsync", function () {
        contentElement.text($(this).val() || "");
    });
}

function ttOnHide(e) {
    $("input[type='text']").off("input.ttsync");
}

Example

Html

     <input id="dropdownlist" style="width:300px" />
     <script>
       var ddl = $("#dropdownlist").kendoDropDownList({
         width:300,
         size:"small",
         dataSource: {
           transport: {
             read: {
               url: 'https://jsonplaceholder.typicode.com/users',
               dataType: 'json'
             }
           }
         },
         dataTextField: "username",
         dataValueField: "id"
       }).data('kendoDropDownList');
     
       var tooltip = ddl.wrapper.kendoTooltip({
         filter: ".k-input-value-text",
         position: "right",
         width: 200,
         content: function () {
           return ddl.text() || "";
         },
         show: function(e){
           var el = e.sender.popup.element.find(".k-tooltip-content");
           el.text(ddl.text() || "");
         }
       }).data("kendoTooltip");
     
       function refreshTooltip(){
         if (tooltip && tooltip.popup && tooltip.popup.visible()) {
           tooltip.popup.element.find(".k-tooltip-content").text(ddl.text() || "");
         }
       }
     
       ddl.bind("select", refreshTooltip);
       ddl.bind("change", refreshTooltip);
       ddl.bind("dataBound", refreshTooltip);
     </script>

Additional Notes:

• Ensure that the tooltip's Position setting does not cause focus issues for the textbox. For example, setting TooltipPosition.Bottom can resolve such conflicts.
• If using a DropDownList, apply a similar approach to dynamically refresh its tooltip content.

See Also

• Kendo UI for Telerik UI for ASP.NET Core ToolTip Documentation
• Adding ToolTips to DropDownList
• Kendo UI Tooltip API