kendo tooltip is shown only after second 'hover' event - kendo-ui

Question

I use kendo grid and want to show kendo tooltip for icon in header cells.
I have the following code:
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("List", "i3screenResult"))",
type: "POST",
dataType: "json",
data: function () {
var data = {
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
},
dataBinding: function (e) {
$('.questionmark').on("hover", function () {
var tooltip = $(this).kendoTooltip({
content: $(this).attr('tooltip'),
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
}).data("kendoTooltip");
});
},
scrollable: false,
columns: [
{
field: "BackgroundReportAccount",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount.Details")' />",
width: 150
},
{
field: "ProviderReferenceId",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.ProviderReferenceId") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.ProviderReferenceId.Details")' />",
width: 150
},
//....
]
});
});
</script>
It works, but only since second hover event for img.
Why so and how to fix?

Answer 1

Try this AFTER grid initialization:
$('#grid').kendoTooltip({
content: function(e) {
return $(e.target).attr('tooltip');
},
filter: 'img.questionmark',
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
});
Also, you should change the attribute name from tooltip to data-tooltip since tooltip is not a standard HTML attribute. Then you can get it's value with $(e.target).data('tooltip');
Demo