This is a migrated thread and some comments may be shown as answers.

Refresh tooltip in grid

1 Answer 366 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Jokull asked on 07 Dec 2017, 08:47 AM


I'm trying to refresh tooltip in grid but it's not working. Here's what I'm doing:

I have an MVC Grid and I initialize the tooltip like this:

var tooltip = $("#classesAvailableGrid").kendoTooltip({
            filter: ".comment",
            position: "top",
            width: 180,
            content: function (e) {
                var dataItem = $('#classesAvailableGrid').data('kendoGrid').dataItem('tr'));

                var id = dataItem["Id"];

                var text = $('#com-' + id).data('tooltiptext');

                return text;

This works fine.

The functionality I'm seeking is when I click the cell where I have the tooltip I prompt the user with a popup input field where he can update the tooltip message. On success I save the new message to database but then I want to update the tooltip as well. I am able to update the data attribute but the actual message that is displayed on hover is still the same.

var request = $.ajax({
            url: '/Controller/ActionMethod',
            type: 'POST',
            data: JSON.stringify(msg),
            contentType: 'application/json; charset=utf-8'
        }).success(function (data) {

            if (0 >= data.error.length) {
                if (data.icon) {
                    if (el.find('i').length) {
                        el.find('i').attr('data-tooltiptext', inputValue);

                        selectedTooltip.tooltip.options.content = inputValue;
                    else {
                        var i = '<i id="com-' +'rid') + '" class="fa fa-comment comment" data-tooltiptext="' + inputValue + '" aria-hidden="true"></i>';

                else {

                    title: data.title,
                    text: data.success,
                    type: "success",
                    timer: 1000,
            else {
                swal(data.title, data.error, "error");
        }).error(function (data) {

I have tried several things but none have worked. Any help would be appreciated!

Thank you,


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 11 Dec 2017, 09:27 AM
Hello Jokull,

I am attaching an ASP.NET MVC project, where a similar scenario to the one described is demonstrated (Updating Grid tooltip content from a Kendo UI Window).

To achieve the desired result I have used the following approach:

1) Used a client template for the Grid column to which the Tooltip is bound. This allows us to wrapp the content in a custom container and also add a title attribute, which will be used to update the tooltip:
columns.Bound(p => p.ShipName).ClientTemplate("<div class='ship-temp' title='#= data.ShipName #'>#= data.ShipName #</div>");

2) Attached a doubleclick event handler to the grid column ("ShipName" in this case). When triggered, the current column container is saved in a global variable:
var target = "";
$("#grid").on("dblclick", ".ship-temp", function (e) { 
target =;
var window = $("#myWindow").getKendoWindow();;

3) After the Window button is clicked, the saved target title attribute is modified with the new value and the refresh() method of the Tooltip is called:
function OnTooltipChangeClick(e) {
var window = $("#myWindow").getKendoWindow();
var newText = window.wrapper.find(".k-textbox").val();
$(target).attr("title", newText);

You will notice that with this approach the content is being updated only for the respective row.

Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question