Showing tooltip for the frozen row in Kendo Grid - kendo-ui

Question

I have a kendo grid with a one frozen row on the top. I wanted to show a tool tip when user hover mouse over the grid row. I was able to show tooltip for all the rows except for the top frozen row. The top frozen row still shows data from the second row.
$(document).ready(function () {
$("#grid").kendoGrid({
autoBind: false,
height: 300,
columns: [{ field: "Source", title: "Source" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }],
dataSource: {
data: [
{ Source: "Master", FirstName: "Foo", LastName: "Bar" },
{ Source: "2", FirstName: "FirstName 2", LastName: "Last Name 2" },
{ Source: "3", FirstName: "FirstName 3", LastName: "Last Name 3" },
{ Source: "4", FirstName: "FirstName 4", LastName: "Last Name 4" },
{ Source: "5", FirstName: "FirstName 5", LastName: "Last Name 5" },
{ Source: "6", FirstName: "FirstName 6", LastName: "Last Name 6" },
{ Source: "7", FirstName: "FirstName 7", LastName: "Last Name 7" },
{ Source: "8", FirstName: "FirstName 8", LastName: "Last Name 8" },
{ Source: "9", FirstName: "FirstName 9", LastName: "Last Name 9" },
{ Source: "10", FirstName: "FirstName 10", LastName: "Last Name 10" },
{ Source: "11", FirstName: "FirstName 11", LastName: "Last Name 11" },
{ Source: "12", FirstName: "FirstName 12", LastName: "Last Name 12" }
]
}
});
var kGrid = $("#grid").data("kendoGrid");
kGrid.bind("dataBound", function (e) {
console.log("dataBound");
var frozenRow;
var items = e.sender.items();
items.each(function () {
var row = $(this);
var dataItem = e.sender.dataItem(row);
if (dataItem.Source == "Master") {
frozenRow = row;
}
})
if (frozenRow) {
var cloned = frozenRow.clone();
cloned.addClass("im-frozen-row");
var thead = kGrid.element.find(".k-grid-header table thead");
thead.append(cloned);
frozenRow.hide();
}
});
kGrid.dataSource.fetch();
$("#grid").kendoTooltip({
filter: ".k-master-row", //this filter selects the second column's cells and the second column header
position: "top",
width: 250,
content: function (e) {
// If the element is the header, return the text of the cell.
if (e.target.is("th")) {
return e.target.text();
}
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target);
return "Source: " + dataItem.Source + "<br/>" + dataItem.FirstName + "," + dataItem.LastName;
}
}).data("kendoTooltip");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script></head>
<div id="grid"></div>

Answer 1

Try this, I am using your custom class that you are adding to the row that you clone into header section "im-frozen-row" to identify your frozen row when you are adding tooltips.
Your if condition is not able to identify your row since it is not a "th" type element. And since you are already having a class that you add in your clone, it is easier to find the element you're looking for.
$("#grid").kendoTooltip({
filter: ".k-master-row", //this filter selects the second column's cells and the second column header
position: "top",
width: 250,
content: function (e) {
if(e.target.hasClass("im-frozen-row")) { //Note this will allow to identify your frozen row
let arr = e.target.text().match(/[A-Z][a-z]+/g); // Here your returned response is for your data here "MasterFooBar", because this is hardcoded data I can break the words into 3 words, but if you'd like to have exact same tooltips as other rows with some other type of data it will not work.
let str = `Source: ${arr[0]}, First Name: ${arr[1]}, Last Name: ${arr[2]}`; // I am concatenating string to show exactly the type of tooltip other rows have.
return str;
}
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target);
return "Source: " + dataItem.Source + "<br/>" + dataItem.FirstName + "," + dataItem.LastName;
}
}).data("kendoTooltip");
Please note that you can also print your tooltip as is what is returned from "e.target.text()".