Tooltip on icons inside Kendo Grid cell

[Mehwish]

Hello,
sorry if this has been asked before, I tried searching the forum but didn’t quite find the same problem I have..
So I made a table with KendoGrid and in the first column of the table I have icons for active incident tickets and service requests. I want to use the KendoTooltip on the icons inside the table cell.

I tried out this code snippet from here:

$("#grid").kendoTooltip({
          filter: "td:nth-child(1)", 
          position: "right",
          content: function(e){
            var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
            var content = dataItem.Text;
            return content;
          }
}).data("kendoTooltip");

But the tooltip is applied to the whole cell, while I want to use it on the individual icons inside the cell. I tried putting the icons inside a new <div> in the template of the columns, like this (very simplified):

var column = {
              field: "IsAboutConfigItems",
              title: "Incidents/Service Requests ",
              template: function (dataItem) {
                              var result = "<div id=\“container\“> … <img>…</img> …</div>“;
                              return result;

                             }
                    };

And the tooltip:
$("#container").kendoTooltip({
                    content: function (e) {                      
                      var result = "test" ;

                      //etc...
                      return result;
                    }
                  });

But it doesn’t work, there is no tooltip showing up at all but also no errors in DevTools. I’m not sure what I’m doing wrong?

[Ivan Danchev]

Hello Mehwish,

If you want the Tooltip to show up only on hovering the image you need to change the selector you pass to the filter option. Since you are using a template and in it an img tag, then the filter should be set like this:

filter: "td:nth-child(1) img",

Here's a dojo example: https://dojo.telerik.com/IVIpazov/2

Regards,
Ivan Danchev
Progress Telerik

[Mehwish]

Hello Ivan,

I tried that before but it seems I put the tooltip initialization at the wrong place of my code. I moved it around and now the icons have tooltips but they are flickering though..

[Ivan Danchev]

Hello Mehwish,

Could you demonstrate the flickering in the example I linked?

Regards,
Ivan Danchev
Progress Telerik

[Mehwish]

Hello Ivan,

Even if I include your code in our solution exactly the way it is, the flickering occurs. But we are using a solution from another company that can be costumized to an extent, so there is alot of code I'm not entirely familiar with. I might have to check back with the other company first. 

But one other question, in your example you used the tooltip on the "#grid" div, but in my example I used the id "#container" for the div made inside the template because we will have at least 2 different icons in the first column and I want separate tooltip texts for each of them (created dynamically). If I exchange your  $("#grid").kendoTooltip for  $("#container").kendoTooltip, it doesn't work anymore. Is it not possible to use the Tooltip for elements created inside the template?

[Ivan Danchev]

Hello Mehwish,

Changing the target element from #grid to #container requires changing the filter as well:

from:

$("#grid").kendoTooltip({
  filter: "td:nth-child(1) img", 
  //...
}).data("kendoTooltip");

to:

$("#container").kendoTooltip({
  filter: "img", 
  //...
}).data("kendoTooltip");

because the container element does not contain a td element, it is within the td element.

However, if you initialize the Tooltip like this, it will apply only on the first element with id "container", i.e. you will have a Tooltip only over the first record in the Grid.

Thus, we would recommend using the Grid as a target, and if showing a different Tooltip content is needed, you can do that by using conditional logic in the content function, e.g.:

content: function(e){
  var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
  
  if(dataItem.Text == "Something") {
  	var content = dataItem.Text;
  }
  else {
    var content = "<strong>...different content here...</strong>";
  }
  return content;
}

In the content function you have access to the hovered record's data, which allows you to return different content based on the respective conditional logic.

With regard to the flickering, make sure the latest Kendo UI version is used in the project, because we have had such issues in older versions, which have been fixed. Custom CSS that overrides default Kendo UI styles can also be responsible, so try removing it, if there is such.

Regards,
Ivan Danchev
Progress Telerik